Jquery слайдер с несколькими элементами div

У меня здесь есть базовый код, который скользит/не скользит, который отлично работает, однако, поскольку есть 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>

html jquery slide slidetoggle sliders
person Karim Ali    schedule 03.06.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вам лучше дать своим элементам класс, тогда вы можете прикрепить обработчик одного клика:

<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 классом.

Вот простая скрипка

person billyonecan    schedule 03.06.2013

arrow_upward
0
arrow_downward

Если бы это был мой код, я бы, вероятно, добавил какой-то дополнительный селектор и использовал один обработчик 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 (или что-то в этом роде), а затем скрыть элементы управления с этим классом, прежде чем вы нажмете.

person CSharpConductor    schedule 03.06.2013