Вопрос JQuery о скользящем меню - PullRequest
Новая
       22

Вопрос JQuery о скользящем меню

0 голосов
/ 17 июля 2011

У меня есть простое горизонтальное меню, которое использует JQuery для вертикального скольжения вниз по div с неупорядоченным списком при нажатии родительского href.Он отлично работает, когда у меня только две вкладки, но не когда их больше 2. Когда их больше 2, что-то происходит с SlideToggle, и в итоге происходит переключение несколько раз, а не один раз.Я относительно новичок в JQuery, и это поставило меня в тупик.Любая помощь очень ценится!

Вот JQuery 

<script type="text/javascript">
    $(function(){
      $(document).ready(function () {
        $('a.menu_button').click(function (e) {
          e.preventDefault();
          var $this = $(this);
          var ulId = $this.attr("href");
          $this.parent().find("ul").not(ulId).slideUp("medium", function() {
            $ul = $this.parent().find("ul" + ulId )
            $ul.slideToggle('medium');


          });
        });
      });
    });
  </script>

А вот HTML.Я не включил css, потому что я не думал, что что-то из этого было уместно, но я могу опубликовать его, если поможет.

<div id="menus"> 
          <a href="#menu1" class="menu_button" id="home"></a>
          <a href="#menu2" class="menu_button" id="aboutus"></a>
          <a href="#menu3" class="menu_button" id="admissions"></a>

          <ul class="the_menu" id="menu1">
            <li><a href="#">A Website #3</a></li> 
            <li><a href="#">A Website #4</a></li> 
            <li><a href="#">A Link #1</a></li> 
            <li><a href="#">A Link #2</a></li> 
            <li><a href="#">A Website #3</a></li> 
            <li><a href="#">A Website #4</a></li> 
            <li><a href="#">A Link #3</a></li> 
            <li><a href="#">A Link #4</a></li> 

          </ul> 
          <ul class="the_menu" id="menu2">
            <li><a href="#">A Website #1</a></li> 
            <li><a href="#">A Website #2</a></li> 
            <li><a href="#">A Link #1</a></li> 
            <li><a href="#">A Link #2</a></li> 
            <li><a href="#">A Website #3</a></li> 
            <li><a href="#">A Website #4</a></li> 
            <li><a href="#">A Link #3</a></li> 
            <li><a href="#">A Link #4</a></li> 

          </ul> 

          <ul class="the_menu" id="menu3">
            <li><a href="#">A Website #1</a></li> 
            <li><a href="#">A Website #2</a></li> 
            <li><a href="#">A Link #1</a></li> 
            <li><a href="#">A Link #2</a></li> 
            <li><a href="#">A Website #3</a></li> 
            <li><a href="#">A Website #4</a></li> 
            <li><a href="#">A Link #3</a></li> 
            <li><a href="#">A Link #4</a></li> 

          </ul> 

          <div class="clear"></div>
        </div>

Работает нормально, если вы берете третий тег ul и якорь, но как только добавляется третий тег, он переключается слишком много раз.

Вот CSS 

ul, li {
margin:0; 
padding:0; 
list-style:none;
}

div#menus {
position: relative;
background-color: #302f2f;

}

a.menu_button {
display: inline-block;
margin-right: -4px;
margin-bottom: 0px;
}

.menu_button img {
border:1px solid #1c1c1c;
  display: block;
}

.the_menu {
display:none;
width:1000px;

}

.the_menu li {

}

.the_menu li a {
color:#FFFFFF; 
text-decoration:none; 
padding:10px; 
display:block;
float:left;
}

.the_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}


.clear { 
clear: both;
}

#home {
background: url(button_sprite.png);
background-position: 0px 0px;
width:125px;
height:30px;
float:left;
}

#aboutus {
background: url(button_sprite.png);
background-position: -126px 0px;
width:125px;
height:30px;
float:left;
}

#admissions {
background: url(button_sprite.png);
background-position: -252px 0px;
 width:125px;
height:30px;
float:left;
}

РЕДАКТИРОВАТЬ: Когда другой href нажимается, когда один вниз, я хочу, чтобы активный скользнул сначала вверх, а затем новый, чтобы скользить вниз.

Ответы [ 2 ]

0 голосов
/ 17 июля 2011

Я думаю, что в этой части вашего кода и заключается проблема - 

$this.parent().find("ul").not(ulId).slideUp("medium", function() {
            $ul = $this.parent().find("ul" + ulId )
            $ul.slideToggle('medium');


          });

Анонимная функция вызывается n раз, где n - количество элементов ul на вашей странице минус один.Поэтому, когда у вас есть 2 элемента ul, функция вызывается один раз, и все работает, но когда у вас есть 3 элемента ul, функция вызывается дважды, и вы видите странное поведение.Попробуйте изменить свой код на это -

РЕДАКТИРОВАТЬ (изменил исходный код после работы с примером на jsbin) 

$(function(){
  $(document).ready(function () {
    $('a.menu_button').click(function (e) {
      e.preventDefault();
      var $this = $(this);
      var ulId = $this.attr("href");
      var clicked_menu_is_visible = $this.parent().find("ul" + ulId).filter(':visible').length > 0;
      var visible_uls = $this.parent().find("ul").filter(':visible');
      if (visible_uls.length === 0) { //no menus showing - just show clicked menu 
        $ul = $this.parent().find("ul" + ulId);
        $ul.slideToggle('medium');
      }
      else { //close open menus (should only be one open) then open clicked menu
             //via callback 
        $this.parent().find("ul").filter(':visible').slideUp("medium", function() {
          $ul = $this.parent().find("ul" + ulId);
          //open clicked menu - unless menu was already open when clicked
          if (!clicked_menu_is_visible) $ul.slideToggle('medium');   
        });
      }  
    });
  });
});
0 голосов
/ 17 июля 2011

Здесь может помочь небольшой контекст, кажется, в вашем jQueries происходит много ненужных обходов. То, что вы описали, может быть достигнуто с помощью: 

$('a.menu_button').click(function(){
    $( $(this).attr("href") ).slideDown();   
});

Но это не очень красивое меню. Во-первых, потому что он опирается на исходную позицию UL, а не на нажатую кнопку А. Во-вторых, потому что нет положения для «удаления». Может быть, более подходящим является меню ролловера?

...