javascript - 如何选择列表中的嵌套按钮？

Question

我正在尝试创建一个切换容器的按钮我目前正在使用它，如果用户单击标题上的任意位置，容器将切换，但我希望点击功能在嵌套在标题内的列表中的按钮上工作。

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

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

http://jsfiddle.net/2o0wx8x4/

   <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

试试这个:

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') 以关闭所有同级容器。