Question

我有以下代码

HTML

<div class="menu_head">
<p class="menu_head_open">
<img style="vertical-align:middle;" src="http://oi44.tinypic.com/dyz2r.jpg" alt="">Administration
</p>
</div>
<div class="menu_body" style="display: none;">
    <table class="plan_table" cellspacing="0" cellpadding="0">
    <tbody>
      <tr>
        <td class="plan_ta_txt" style="width:40%">Moderators</td>
        <td>1</td>
        <td>1</td>
        <td style="width:10%">3 </td>
        <td style="width:10%">5 </td>
        <td style="width:10%">10 </td>
        <td style="width:10%;border-right:none;">
        <img style="width:20px; height:17px; padding-left:5px" src="right.gif" alt="right">
        </td>
      </tr>
      <tr>
        <td class="plan_ta_txt">
        Workflow Management<br>(Deparments, Divisions, Teams)
        </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td>1</td>
        <td>1</td>
        <td style="border-right:none;">
        <img style="width:20px; height:17px; padding-left:5px" src="right.gif" alt="right">
        </td>
      </tr>
    </tbody>
    </table>
</div>

<!-- View all and Close all buttons -->
<p style="padding-top:13px;padding-left:180px;">
    <a id="view_but" href="#">
       <img height="31" alt="View All" style="width:87px" src="http://oi40.tinypic.com/30tlytu.jpg">
    </a>
    <a id="close_but" href="#">
        <img height="31" alt="CloseAll" style="width:87px" src="http://oi43.tinypic.com/5yi0bc.jpg">
    </a>
</p>

CSS

.menu_head{
   border-bottom: 1px solid #ABABAB;
   cursor: pointer;
   font-size: 15px;
   font-weight: bold;
   height: 38px;
   padding: 10px 18px 0;
   position: relative;
   background:#e4e4e4 url('http://oi41.tinypic.com/5ofhwg.jpg') center left repeat-x scroll;
}

.menu_head_close{
   background:#e4e4e4 url('http://oi41.tinypic.com/34fifye.jpg') center left repeat-x scroll;
}

JQuery的

$(document).ready(function () {
    $(".menu_head").click(function () {
        $(this).toggleClass('menu_head_close');
        $(this).next().toggle(1000);
    });
    $("#view_but").click(function () {
        $(".menu_body").toggle(1000);
        $(".menu_head").toggleClass("menu_head_close");

    });
    $("#close_but").click(function () {
        $(".menu_body").toggle(1000);
        $(".menu_head").toggleClass("menu_head_close");
    });
});

我有

一个标签，如果我点击它，它将展开并显示一个表格。我有8个不同表格的类似标签。
我使用切换以切换显示，如上面的代码所示。
我查看全部并关闭所有按钮，点击我想显示所有标签中的所有表格。我使用相同的切换来实现这一目标。并关闭所有按钮，他们必须关闭。
因为我用它来切换它们只是切换。当桌子打开然后我点击查看所有桌子都关闭，因为我用过切换。

任何人都可以解决这个问题吗？

Answer 1

你可以使用show / hide来打开或关闭内容而不是切换，而addClass，removeClass也是如此

$("#view_but").click(function(){
    $(".menu_body").show(1000);
    $(".menu_head").addClass("menu_head_close");    

});
$("#close_but").click(function(){
    $(".menu_body").hide(1000);
    $(".menu_head").removeClass("menu_head_close"); 
});
});

Answer 2

切换后unbind click event可以"#view_but"，就像这样

$("#view_but").click(function(){
        $(".menu_body").toggle(1000);
        $(".menu_head").toggleClass("menu_head_close"); 
        $("#view_but").unbind('click'); 
    });

这只是一个修复，我建议使用Paulitto的答案。

切换问题

2 个答案: