Question

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

我想要做：

仅在按下菜单项时显示隐藏的内容。（应选中复选框）
按下菜单项时，应选中复选框
再次点击菜单项时，应再次隐藏隐藏页面。（未选中复选框）
该复选框应取消选中

我的菜单表格插图：

<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，这意味着当您点击其中任何一个时，它将切换显示/隐藏div与“hidediv”类。

编辑你在这里有几个有效的答案，但我认为你正在接近这个错误。如果你去尝试另一个用户发布的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/

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

3 个答案: