Jquery如何检查div单击，更改类和显示div上的复选框

Question

我试图在单击 div.menuitem 时选中复选框，然后它应该更改类并在具有 class 的 hidediv 的 div 中显示内容。当再次单击 div.menuitem 时，它应该删除该类并再次隐藏 div 并取消选中该复选框。

我想做的事：

1. 仅在按下菜单项时显示 hidediv 的内容。 （应选中复选框）

2. 按下菜单项时，应选中复选框

3. 再次单击菜单项时，hidediv 应再次隐藏。 （复选框未选中）

4. 并且复选框应该取消选中

我的菜单表格说明：

<div class="menuitem">
1.Company1
</div>
<div class="hidediv">
1.1 Company 1.1 
1.2 Company 1.2
</div>

<div class="menuitem">
1.Company2
</div>
<div class="hidediv">
1.1 Company 2.1 
1.2 Company 2.2
</div>

我以前的 Jquery 代码，只有在单击复选框时才会触发。我要漂亮 与此类似的功能，在单击 div 时也应触发复选框：

$('.menuitem input:checkbox').change(function(){
        if($(this).is(':checked')) {
            $('div.hidediv').addClass('someclass').show(200); // not needed it there is another way of identifying the div later to add to hidediv class again.
            $('div.hidediv').removeClass('hidediv');
        } else {
            $('div.someclass').addClass('hidediv').hide(200); 
        }
});
});

到目前为止我的 Jquery（不工作）：

$('.menuitem').click(function(e){
$(this).addClass('menuclicked');          
$('div.hidediv').addClass('clicked').show(200);
            $('div.hidediv').removeClass('hidediv');
        } else {
            $('div.someclass').addClass('hidediv').hide(200); 
        }
$('.menuclicked').click(function(e){
$('div.someclass').addClass('hidediv').hide(200); 
});

我的 HTML：

<form accept-charset="UTF-8" action="/" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>

        <div class="menuitem">
        <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="menuitem">
        <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="hidediv">
        <div class="menuitem">
        <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>
    <input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" />
</form>

Answer 1

我可以帮忙。我认为你的结构是错误的。您的 html 中有三个字段，第三个字段被隐藏。我假设当您填写第一个字段时，您不希望发生任何事情，但是单击第二个字段应该会显示第三个字段？

试试这个：

//Use toggle instead of .click()
$('.menuitem').toggle(function(){
    $('div.hidediv').addClass('clicked').show(200);
}, function(){
    $('div.hidediv').removeClass('clicked').hide(200);
});

这将影响所有具有“menuitem”类的 div，这意味着当您单击三个中的任何一个时，它将切换显示/隐藏具有“hidediv”类的 div。

edit 你在这里有几个有效的答案，但我认为你正在接近这个错误。如果你去尝试另一个用户发布的 jsfiddle，谁的 javascript 和我的一样——它揭示了我上面谈到的问题。如果没有一些巧妙的点击，您无法选择所有三个框。每次单击都会切换显示/隐藏第三个复选框。我可以建议像这样修改您的代码吗：

//Use toggle instead of .click()
$('.toggleMenuItem').toggle(function(){
    $('div.hidediv').addClass('clicked').show(200);
}, function(){
    $('div.hidediv').removeClass('clicked').hide(200);
});

<form accept-charset="UTF-8" action="/" method="get">

    <div style="margin:0;padding:0;display:inline">
        <input name="utf8" type="hidden" value="&#x2713;" />
    </div>

        <div class="menuitem">
            <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="menuitem toggleMenuItem">
            <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="hidediv">
            <div class="menuitem">
                <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>
        <input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" />
</form>

这将使只有单击“.toggleMenuItem”类的复选框才会显示第三个复选框。

Answer 2

试试这样的：

$('.menuitem').click(function(e){
if($(this).hasClass('menuClicked')){
    // Already clicked
    $(this)
        .removeClass('menuclicked')
        .html("");
}else{
    // First click
    $(this)
        .addClass('menuclicked');
        .html($('#hidediv').html());
}
})

Answer 3

这可能会满足您的需求：

$('.menuitem').click(function(e){
    $(this).toggleClass('clicked');
    $('div.hidediv').toggle(200);
});

如果缺少功能，请告诉我。

http://jsfiddle.net/citizenconn/2bCdR/