JQuery帮助创建切换功能

想我想做的事：

当在菜单项DIV用户点击其复选框应检查和minimenu应该下方显示。
如果用户再次点击menuitem div，minmenu应该隐藏，menuitems复选框应该被取消。

我有一个DIV不工作测试：

$('div#category1').click(function(e){ 
    $('div#minimenu1').removeClass('hidediv'); 
    $('div#minimenu1').addClass('someclass').show(200); 
    $('div#minimenu1').toggle(200); 
}); 
});

我的CSS：

.hidediv {display:none;}

我的HTML：

 <div class="menuitem" id="category1"> 
     <label for="search_company1">company1</label> 

     <input name="search[company1_is_true]" type="hidden" value="0" /><input id="search_company1_is_true" name="search[company1_is_true]" type="checkbox" value="1" /> 
     </div> 
<div class="hidediv" id="minimenu1"> 
     <label for="search_company3">company3</label> 
     <input name="search[company3_is_true]" type="hidden" value="0" /><input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" /> 
     </div> 
<div class="category2"> 
     <label for="search_company2">company2</label> 
     <input name="search[company2_is_true]" type="hidden" value="0" /><input id="search_company2_is_true" name="search[company2_is_true]" type="checkbox" value="1" /> 
    <div> 
<div class="hidediv" id="minimenu2"> 
     <label for="search_company3">company3</label> 
     <input name="search[company3_is_true]" type="hidden" value="0" /><input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" /> 
     </div> 

    <input id="submit" name="commit" style="display:none;" type="submit" value="Submit" /> 
</form>

UPDATE：

现在我已经创建了我想要使用的代码，但是如何创建一个智能函数以便我不需要为每个menuitem重复一遍又一遍的代码？

的组别我的jQuery代码：

$(function() { 

     $('div#category1').toggle(function() { 

      $('div#minimenu1').removeClass('hidediv'); 
      $('div#category1').addClass('clicked').show(200); 
      $('div#minimenu1').addClass('someclass').show(200); 
      $('div#category1 input:checkbox').attr('checked','checked'); 

     }, function() { 
      $("div#category1 input:checkbox").prop("checked", false); 
      $('div#minimenu1').addClass('hidediv'); 
      $('div#category1').removeClass('clicked'); 

     }); 
    });

我的类别2 jQuery代码： $（函数（）{

 $('div#category2').toggle(function() { 

      $('div#minimenu2').removeClass('hidediv'); 
      $('div#category2').addClass('clicked').show(200); 
      $('div#minimenu2').addClass('someclass').show(200); 
      $('div#category2 input:checkbox').attr('checked','checked'); 

     }, function() { 
      $("div#category2 input:checkbox").prop("checked", false); 
      $('div#minimenu2').addClass('hidediv'); 
      $('div#category2').removeClass('clicked'); 

     }); 
    });

来源

2011-08-03 Rails beginner

你是否尝试自己写一些代码？ – JMax

是的，我已经发布在我的问题 –

$(function() { 

     $('div#category1').toggle(function() { 

      // do the things you want to happen firt time user clicks 

     }, function() { 
      // do the opposite things you want to happen second time user clicks 
     }); 
    });

而对于如果您使用的是新的检查复选框版本的jQuery去：

$(".myCheckbox").prop("checked", true);

如果不是：

$('.myCheckbox').attr('checked','checked');

您可以通过使用每个功能并参照使用this关键字（元素使你的代码模块化，但你需要离开的ID，并添加类到您的div类='类别使用这样的事情）“，并从那里：

$.each($('div.category'), function() { 

      var categoryDiv = $(this); 
      var relativeMinimenu = categoryDiv.next(); 

      categoryDiv.toggle(function() { 
       relativeMinimenu.removeClass('hidediv').addClass('someclass').show(200); 
       categoryDiv.addClass('clicked').show(200); 
       categoryDiv.find('input:checkbox').attr('checked', 'checked'); 
      }, function() { 
       categoryDiv.removeClass('clicked').find('input:checkbox').prop("checked", false); 
       relativeMinimenu.addClass('hidediv'); 
      }); 

     });

来源

2011-08-03 11:50:02 XGreen

我已经创建了我想要category1的代码，但我可以做一个函数，以便我不写重复的代码？我更新了我的问题 –

每个功能都可以帮助你做到这一点。看看我的编辑 – XGreen

我会遇到一个小问题。当复选框被点击时，它将被选中并取消选中。见她：http://jsfiddle.net/2bCdR/2/ –

试试这个

$(".menuitem").click(function() { 
$(".minimenu").slideDown(); 
$(".menuitem:checkbox").attr("checked", true); 
if ($(".menuitem").is(":visible")) { 
    $("#accordion").slideup("fast"); 
$(".menuitem:checkbox").attr("checked", flase); 
} 
})

来源

2011-08-03 11:54:33

下面是我写的一个例子，显示一个菜单项，标题，C内容和复选框切换

<head> 
<script type="text/javascript" src="http://segnosis.net/jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("div").click(function(){ 
      var sub = $(this).children(".contents").first(); 

      if($(this).hasClass("menu-item") == true){ 
       sub.toggle(); 
       $("#option1").attr("checked", "checked"); 
      } 
     }); 
    }); 
</script> 
</head> 
<body> 
    <div class="menu-item"> 
     <h4>Menu Item 1</h4> 
     <div class="contents"> 
      <input id="option1" type="checkbox" /><label for="test1">Option 1</label> 
     </div> 
    </div> 
</body> 
</html>

来源

2011-08-03 11:56:28 Drake

我已更新我的问题 –

JQuery帮助创建切换功能

回答

相关问题