Блог

У меня есть рабочая панель меню, каждая кнопка в меню вызывает дополнительную панель меню в соответствии с приведенным ниже кодом. (С использованием jQuery)

 <script>
$(document).ready(function(){
    $("#homeButton1").mouseover(function(){
        $(".secondMenu").show();
        $(".thirdMenu").hide();
        $(".fourthMenu").hide();  

     });

    $("#homeButton2").mouseover(function(){
        $(".secondMenu").hide();
        $(".thirdMenu").show();
        $(".fourthMenu").hide();  
    }); 

    $("#homeButton3").mouseover(function(){
        $(".secondMenu").hide();
        $(".thirdMenu").hide();
        $(".fourthMenu").show();  
    });
});
</script>
  

Я считаю, что это плохой способ кодирования, я бы предпочел иметь только одну функцию для выполнения всего этого, вместо того, чтобы иметь одну функцию для каждой из этих строк меню. Я думал о логике, как показано ниже.(что также включает изменение идентификаторов строки меню)

 <script>
$(document).ready(function(){
    var i=1;
    $("#homeButton" i).mouseover(function(){
        $(".menu1").hide();
        $(".menu2").hide();
        $(".menu3").hide(); 
        $(".menu" i).show(); 

     });
     });
    </script>
  

Однако проблема в том, как мне установить значение переменной «i», чтобы отразить правильную строку меню. Мы можем инициализировать i, но нам также нужно изменить его.Мой HTML-код выглядит следующим образом.

 <div class="container">

<ul>
<li id="homeButton1">Home</li>
<li id="homeButton2">Wiki</li>
<li id="homeButton3">Jira</li>
<li id="homeButton1">Projects/Releases</li>
<li>Documentation</li>
<li>Tools/Environment</li>
<li>Help/Support</li>
</ul>
</div>

<div class="secondMenu">
<ul>
<li >First Sub Menu</li>
<li>Wiki</li>
<li>Jira</li>
<li>Projects/Releases</li>
<li>Documentation</li>
<li>Tools/Environment</li>
<li>Help/Support</li>
</ul>
</div>

<div class="thirdMenu">
<ul>
<li >Second Sub Menu</li>
<li>Wiki</li>
<li>Jira</li>
<li>Projects/Releases</li>
<li>Documentation</li>
<li>Tools/Environment</li>
<li>Help/Support</li>
</ul>
</div>

<div class="fourthMenu">
<ul>
<li >Third Sub Menu</li>
<li>Wiki</li>
<li>Jira</li>
<li>Projects/Releases</li>
<li>Documentation</li>
<li>Tools/Environment</li>
<li>Help/Support</li>
</ul>
</div>



</body>
</html>
  

Почему вы должны использовать jQuery для этого, а не только CSS3?

HTML:

 <div class="menu-1">Menu 1<ul></ul></div>
<div class="menu-2">Menu 2<ul></ul></div>
  

CSS:

 div ul {
    width: 50px;
    height: 50px;
    opacity: 0;
    transition: all 2s;
}

div:hover ul {
    opacity: 1;
    transition: 2s;
}

.menu-1 ul {
    background: blue;
}

.menu-2 ul {
    background: red;
}
  

Вот скрипка:http://jsfiddle.net/P3WUB /

использовать обычные классы в сочетании либо с индексацией, либо с атрибутами данных довольно просто.

HTML используя индексацию, просто добавьте общий класс к обоим типам элементов:

 <li id="homeButton1" class="homebtn">Home</li>
<li id="homeButton2"  class="homebtn">Wiki</li>
......
<div class="secondMenu subNav">
<div class="thirdMenu subNav">
  

JS (с использованием индексации):

 var $subs=$('.subNav'),
    $homeBtn=$('.homebtn').hover(function(){
        var idx=$homeBtn.index(this);/* returns index of hovered element within collection of same class*/
        $subs.eq(idx).show(); /* show sub element with same index*/
    }, function(){
       $subs.hide() 
    });
  

Индексирование предполагает, что порядок перехода от верхних ссылок к вспомогательным равен 1: 1

HTML с использованием атрибутов данных, общих классов и идентификаторов (порядок в DOM не имеет значения):

 <li id="homeButton1" class="homebtn" data-sub="#second">Home</li>
<li id="homeButton2"  class="homebtn"  data-sub="#third">Wiki</li>
......
<div class="secondMenu subNav" id="second">
<div class="thirdMenu subNav" id="third">
  

JS

 var $subs=$('.subNav'),
    $homeBtn=$('.homebtn').hover(function(){
        var subId=$(this).data('sub');/* returns the jQuery selector matching subNav ID */
        $(subId).show();
    }, function(){
       $subs.hide() 
    });
  

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

 $(function(){
    $(".submenu-toggle").hover(function(){ 
        //mouse enter
        $(".submenu").hide();//hide all submenus
        $('#' $(this).attr('submenu-data')  '').show();//show the submenu data target
     },
     function(){
        //mouse out(optional)
     }); 
});
</script>

<div class="container">

<ul>
<li id="homeButton1" class="submenu-toggle" submenu-data="sub1">Home</li>
<li id="homeButton2" class="submenu-toggle" submenu-data="sub2">Wiki</li>
<li id="homeButton3" class="submenu-toggle" submenu-data="sub3">Jira</li>
<li id="homeButton1" class="submenu-toggle" submenu-data="sub4">Projects/Releases</li>
<li>Documentation</li>
<li>Tools/Environment</li>
<li>Help/Support</li>
</ul>
</div>

<div id="sub1">
<ul>
<li >First Sub Menu</li>
<li>Wiki</li>
<li>Jira</li>
<li>Projects/Releases</li>
<li>Documentation</li>
<li>Tools/Environment</li>
<li>Help/Support</li>
</ul>
</div>

<div id="sub2">
<ul>
<li >Second Sub Menu</li>
<li>Wiki</li>
<li>Jira</li>
<li>Projects/Releases</li>
<li>Documentation</li>
<li>Tools/Environment</li>
<li>Help/Support</li>
</ul>
</div>

<div class="sub4">
<ul>
<li >Third Sub Menu</li>
<li>Wiki</li>
<li>Jira</li>
<li>Projects/Releases</li>
<li>Documentation</li>
<li>Tools/Environment</li>
<li>Help/Support</li>
</ul>
</div>