0

我在这里有一个基本代码，可以滑动/取消幻灯片，但是因为有 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>
4

2 回答 2

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。

这是一个简单的小提琴

于 2013-06-03T12:49:17.393 回答
0

如果这是我的代码，我可能会添加某种类型的附加选择器并使用单个 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 之前使用该类隐藏控件。

于 2013-06-03T12:46:51.217 回答