Question

我在这里有一个基本代码，其中幻灯片/非幻灯片工作正常但是因为有5个div，如果slideToggle（）滑动打开并且我点击另一个链接，它也会触发slideToggle（）以打开这个div。我想要它所以关闭打开的div然后打开请求的div？

非常感谢

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
  $("#Portal").click(function(){
    $("#portal").slideToggle("slow");
  });
  $("#Profile").click(function(){
    $("#profile").slideToggle("slow");
  });
  $("#Stats").click(function(){
    $("#stats").slideToggle("slow");
  });
  $("#Teams").click(function(){
    $("#teams").slideToggle("slow");
  });
  $("#Matches").click(function(){
    $("#matches").slideToggle("slow");
  });
});
</script>

        <table width="100%" id="{table}">
          <thead>
            <tr>
              $view_portal
              <th width="$tbl_head_width%"><div id="Profile">Profile</div></th>
              <th width="$tbl_head_width%"><div id="Stats">Stats</div></th>
              <th width="$tbl_head_width%"><div id="Teams">My Teams</div></th>
              <th width="$tbl_head_width%"><div id="Matches">My Matches</div></th>
            </tr>
          </thead>
        </table>

                <div id="portal" style="display: none;">$my_portal</div>
                <div id="profile" style="display: none;">Profile</div>
                <div id="stats" style="display: none;">Stats</div>
                <div id="teams" style="display: none;">Teams</div>
                <div id="matches" style="display: none;">Matches</div>

Answer 1

你最好给你的元素一个类，然后你可以附加一个单击处理程序：

<div id="profile" class="navigation">Profile</div>
<div id="profile-content" class="content">Profile content show/hide</div>

然后将点击处理程序附加到navigation：

$('div.navigation').on('click', function() {
  $('#' + this.id + '-content').slideToggle().siblings('.content').slideUp();
});

使用点击元素的id，您可以通过将-content附加到选择器来获取相应的内容（在上面的示例中，您最终得到#profile-content）。然后，您可以对该元素slideToggle()进行slideUp()，只需.content {{1}}类的所有兄弟姐妹。

Here's a simple fiddle

Answer 2

如果这是我的代码，我可能会添加一些额外的选择器并使用单个jQuery处理程序。

<style type="text/css">
 .mypanel {display:none;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
  $(".mytrigger").click(function(){
    $(".mypanel:visible").hide();
    $($(this).data("panel")).slideToggle("slow");
  });
});
</script>

        <table width="100%" id="{table}">
          <thead>
            <tr>
              $view_portal
              <th width="$tbl_head_width%"><div id="Profile" class="mytrigger" data-panel="#profile">Profile</div></th>
              <th width="$tbl_head_width%"><div id="Stats" class="mytrigger" data-panel="#stats">Stats</div></th>
              <th width="$tbl_head_width%"><div id="Teams" class="mytrigger" data-panel="#teams">My Teams</div></th>
              <th width="$tbl_head_width%"><div id="Matches" class="mytrigger" data-panel="#matches">My Matches</div></th>
            </tr>
          </thead>
        </table>

                <div id="portal" class="mypanel">$my_portal</div>
                <div id="profile" class="mypanel">Profile</div>
                <div id="stats" class="mypanel">Stats</div>
                <div id="teams" class="mypanel">Teams</div>
                <div id="matches" class="mypanel">Matches</div>

如果您无法修改该结构中的代码，则只需添加一个名为selected（或其他）的类，然后在slideToggle之前隐藏该类的控件。

Jquery滑块多个div

2 个答案:

Here's a simple fiddle