Question

我正在尝试创建一个切换容器的按钮我目前正在使用它，如果用户点击标题上容器将切换的任何位置，但我希望click函数处理嵌套在标题内的列表内的按钮。

目前，只有选择标题才能使用代码。我希望它仅在用户单击切换按钮时才起作用。我试过$("button").click $(".projectHeader > button")我也尝试过使用parent().children()

有人可以帮我理解如何在点击功能上选择切换按钮吗？我已经尝试了几件事我很困惑，下面是jquery，这里是jsfiddle的链接。非常感谢任何帮助。

   <script type="text/javascript">

        $(document).ready(function()
        {  
            console.log('page has loaded');
          $(".projectHeader").click(function()
          {
            console.log('button was clicked');
            $(this).next('.tableContainer').slideToggle("slow");
             $(this).parent().siblings().children().next().slideUp();
             return false;
            console.log('the table container closed');
          });
        });
    </script>
            <div class="projectWrapper">
                <div class="projectHeader">
                    <ul>
                        <li> <button id="toggleButton">Toggle</button> </li>
                        <li> Project Name </li>
                        <li> Status </li>
                        <li> Budget </li>
                        <li> Client Req Start Date </li>
                        <li> Project Start Date </li>
                        <li> <a href="#">Show All</a> </li>
                        <li> can be staffed () </li>
                    </ul>   
                </div>
                <div class="tableContainer"> table goes in here</div>
             </div>

Answer 1

我可以加载小提琴（安全网络），但是在这里你可以在按钮上添加点击处理程序，并获得对它最接近{{1}的引用}。

.projectHeader

Answer 2

试试这个：

var j$ = jQuery.noConflict();
j$(document).ready(function () {
    console.log('page has loaded');
    j$(".projectHeader button").click(function () {
        console.log('button was clicked');
        j$(this).closest('.projectHeader').next('.tableContainer').slideToggle("slow");
        j$(this).closest('.projectWrapper').siblings().children().next().slideUp();
        return false;
        console.log('the table container closed');
    });
});

<强> jsFiddle example

使用$(".projectHeader button")仅选择按钮。然后，closest('.projectHeader')向上移动DOM到最近的.projectHeader，.next('.tableContainer')选择下一个兄弟div来切换。然后，您需要选择.closest('.projectWrapper')以关闭所有兄弟容器。

Answer 3

这与其他答案类似，但也会对所有其他已消耗的条目进行拼写。

http://jsfiddle.net/2o0wx8x4/3/

根据您的格式：

j$(document).ready(function()
        {  
            console.log('page has loaded');
          j$(".projectHeader button.toggleButton").click(function()
          {
             //get the parent div
             var parent = j$(this).parent().parent().parent();
             console.log('button was clicked');
             parent.addClass("clicked");

             parent.next('.tableContainer').slideToggle("slow");
             j$(".projectHeader:not(.clicked)").next().slideUp();
             parent.removeClass("clicked");
             parent.parent().siblings().children().next().slideUp();
             return false;
          });
        });

如何在列表中选择嵌套按钮？

3 个答案: