Question

我正在尝试创建一个功能切换菜单。

我想要做：

当用户点击menuitem 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>

更新：

现在我已经制作了我想要使用的代码，但是我如何制作一个智能功能，以便我不需要为每个menuitem反复重复代码？

我的类别1的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代码： $（function（）{

        $('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');

        });
    });

Answer 1

$(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并在divs class ='category'中添加一个类，并使用类似的东西从那里获取它此）：

$.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');
            });

        });

Answer 2

试试这个

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

Answer 3

以下是我编写的一个示例，其中显示了菜单项，标题，内容和复选框切换

<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>

JQuery帮助创建切换功能

3 个答案: