Скрипт Jquery для подменю, как я могу его исправить?

Этот код отлично работает, если я хочу сделать эффект переключения, нажав на меню. Вы можете увидеть результат здесь.Скрипт Jquery для подменю, как я могу его исправить?

$(document).ready(function() { 
    var $menu2 = $("#menu-2"); 
    var $links = $('#menu-menu-1 .menu-item a').click(function() { 
     var submenu = $(this).next(); 
     $subs.not(submenu).hide(); 
     var isVisible = submenu.stop(true, true).is(':visible'); 
     $menu2.stop(true, true); 
     if (isVisible) { 
      submenu.hide(500); 
      $menu2.slideUp(300); 
     } else { 
      $menu2.slideUp(300, function() { 
       $menu2.slideDown(300); 
       submenu.show(500); 
      }); 
     } 
    }); 
    var $subs = $links.next(); 
});

Моя проблема .menu-элемент, с этим сценарий выполняет код для всех ссылок меню (также для ссылок, которые не имеют подменю ссылки). Но в моем случае я хочу выполнить только ссылки, содержащие ссылки подменю. Если я попытаюсь заменить t .menu-item a с .menu> ul li a не работает.

Структура HTML (генерируемой PHP) кода, как это:

<ul id="menu-menu-1"> 
<li class="menu"> 
    <a>News</a>          //first main menu 
     <ul class="sub-menu" style="display: none;"> //second grey menu 
      <li> 
      <a>Mondo</a> 
      <a>News Live</a> 
      <a>Quotidiani Cartacei</a> 

      </li> 
</li> 
</ul>

Соответствующий CSS:

.menu { 
background-color: #F6F6EE; 
border-radius: 1px; 
height: 30px; 
padding: 10px 10px 0 5px; 
width: 100%; 
} 
.menu li a { 
color: #716B6B; 
display: block; 
float: left; 
font-size: 14px; 
padding: 2px 17px; 
text-decoration: none; 
width: 100%; 
} 
#menu-2 { 
background-color: #DCDCD5; 
border-radius: 1px; 
display: none; 
height: 33px; 
position: relative; 
width: 100%; 
z-index: -1; 
}

Как я могу это исправить?

источник

2013-11-12 Giulio Bambini

Можете ли вы опубликовать скрипку? – Poornima

самым быстрым способом является добавление класса в родительское подменю li hold – arclite

Вы должны проверить, на верхней части функции, если текущая ссылка имеет подменю прилагается. Проверьте первые две строки click обратного вызова:

$(document).ready(function() { 
    var $menu2 = $("#menu-2"); 
    var $links = $('#menu-menu-1 .menu-item a').click(function() { 
     var submenu = $(this).next(".sub-menu"); 
     var hasSubmenu = submenu.length >= 1; 

     if(hasSubmenu) { 
      handleLinkWithSubmenu.call(this, submenu); 
     } else { 
      handleLinkWithoutSubmenu.call(this); 
     } 
    }); 
    var $subs = $links.next(); 

    function handleLinkWithSubmenu(submenu) { 
     $subs.not(submenu).hide(); 
     var isVisible = submenu.stop(true, true).is(':visible'); 
     $menu2.stop(true, true); 
     if (isVisible) { 
      submenu.hide(500); 
      $menu2.slideUp(300); 
     } else { 
      $menu2.slideUp(300, function() { 
       $menu2.slideDown(300); 
       submenu.show(500); 
      }); 
     } 
    } 

    function handleLinkWithoutSubmenu() { 
     $subs.hide(); 
    } 
});

источник

2013-11-12 14:15:23

Он работает отлично! Большое спасибо. Только один вопрос: если я хочу скрыть # menu-2, когда я нажимаю ссылку, которая не имеет подменю, я пытаюсь объяснить мне лучше. Если я нажму «Новости» и «# menu-2» открываются, как я могу сказать скрипту закрыть его # menu-2, когда я нажимаю ссылку без подменю, такие как «Politica», «Economia» или «Cronaca»? –

@GiulioBambini I ' вы только что отредактировали ответ, проверьте его –

Если я правильно понимаю ваш вопрос (выполнить только если селектор имеет детей), а затем заменить это:

var $links = $('#menu-menu-1 .menu-item a').click(function (e) { 
    if($links.children().length > 0){ 
     e.preventDefault(); 
     var submenu = $(this).next(); 
     $subs.not(submenu).hide(); 
     var isVisible = submenu.stop(true, true).is(':visible'); 
     $menu2.stop(true, true); 
     if (isVisible) { 
      submenu.hide(500); 
      $menu2.slideUp(300); 
     } else { 
      $menu2.slideUp(300, function() { 
       $menu2.slideDown(300); 
       submenu.show(500); 
      }); 
     } 
    } 
});

источник

2013-11-12 14:12:48

Спасибо i undestand идея элемента управления, если я вставлял его и не работал. :( –

Я думаю, что что-то, как это будет работать на то, что вам нужно, это намного чище и более компактны:

ОБНОВЛЕНО: http://jsfiddle.net/FZHC8/2/

<head> 
    <script src="jquery-1.10.2.min.js"></script> 
    <style> 
     .menu { 
     background-color: #F6F6EE; 
     border-radius: 1px; 
     height: 30px; 
     padding: 10px 10px 0 5px; 
     width: 100%; 
     } 
     a { 
     color: #716B6B; 
     display: block; 
     float: left; 
     font-size: 14px; 
     padding: 2px 17px; 
     width: 100%; 
     cursor:pointer; 
     } 
     #menu-2 { 
     background-color: #DCDCD5; 
     border-radius: 1px; 
     height: 33px; 
     position: relative; 
     width: 100%; 
     z-index: -1; 
     } 
     li{ 
     list-style:none; 
     } 
    </style> 
</head> 
<body> 
    <ul id="menu-menu-1"> 
     <li class="menu"> 
      <a>News</a>          
      <ul class="sub-menu"> 
       <li> 
        <a>Mondo</a> 
        <a>News Live</a> 
        <a>Quotidiani Cartacei</a> 
       </li> 
      </ul> 
      <a>News1</a>          
      <ul class="sub-menu"> 
       <li> 
        <a>Mondo1</a> 
        <a>News Live1</a> 
        <a>Quotidiani Cartacei1</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
    <script> 
     (function() { 
      $("li > ul").hide(); 
      $(".menu > a").click(function (e) { 
       $(this).parent().children(".sub-menu").slideUp(200); 
       $(this).next(".sub-menu").slideDown(200); 
      }) 
     })(); 
    </script> 
</body>

источник

2013-11-12 14:40:05

Скрипт Jquery для подменю, как я могу его исправить?

ответ

Смежные вопросы