说明:Jquery如何在div上点击复选框，更改类和显示div-

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

我想做的事:

仅在按下菜单项时显示隐藏div的内容。
当菜单项被按下时，复选框被选中
当菜单项再次被点击时，隐藏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>

我可以帮忙。我认为你的结构是错误的。html中有三个字段，第三个字段是隐藏的。我想当您填写第一个字段时，您希望什么都不发生，但是单击第二个字段应该显示第三个字段?

试试这个:

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

这将影响所有的div与"menuitem"类，这意味着当你点击任何一个，它将切换显示/隐藏div与"hidediv"类。

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"将显示第三个复选框

试试这样:

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

这可能是你想要的:

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

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

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

相关内容

最新更新

热门标签：