1

我有以下代码

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");
    });
});

在这里我有

  1. 一个选项卡，如果我单击它，它将展开并显示一个表格。我有 8 个带有不同表格的类似选项卡。
  2. 我使用切换来切换显示，如上面的代码所示。
  3. 我有查看全部并关闭所有按钮，单击时我想在所有选项卡中显示所有表格。我使用相同的切换来实现这一点。对于关闭所有按钮，它们必须关闭。
  4. 因为我使用了切换，所以它们只是切换。当表格打开时，我点击查看所有表格正在关闭，因为我使用了切换。

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

4

2 回答 2

1

您可以使用显示/隐藏来打开或关闭内容而不是切换，并相应地添加类、删除类

$("#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"); 
});
});
于 2013-05-04T07:59:46.357 回答
0

你可以unbind在它被切换后，像click event这样"#view_but"

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

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

于 2013-05-04T08:11:05.980 回答