1. ホーム
  2. 質問と答え
  3. Javascript Dropdown Nav - 非選択の縮小オプション

Javascript Dropdown Nav - 非選択の縮小オプション

2016-07-04 12 views
1

私が望むようにJavascriptのドロップダウンリストを表示するのは苦労しています。私が持っているところのここでのペンがあります：Javascript Dropdown Nav - 非選択の縮小オプション

https://codepen.io/mikehdesign/pen/QEgGNW

HTML

<div id="pattern" class="pattern"> 
     <a href="#menu" class="menu-link">Menu</a> 
     <nav id="menu" class="menu" role="navigation"> 
      <ul class="level-1"> 
       <!--Parent #1--> 
       <li class="has-subnav"> 
        <a href="#">Parent #1</a> 
        <ul class="level-2"> 
         <li class="has-subnav"> 
          <a href="#">Child #1</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
         <li class="has-subnav"> 
          <a href="#">Child #2</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
         <li class="has-subnav"> 
          <a href="#">Child #3</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
         <li class="has-subnav"> 
          <a href="#">Child #4</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 

       <!--Parent #2--> 
       <li class="has-subnav"> 
        <a href="#">Parent #2</a> 
        <ul class="level-2"> 
         <li class="has-subnav"> 
          <a href="#">Child #1</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
         <li class="has-subnav"> 
          <a href="#">Child #2</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
         <li class="has-subnav"> 
          <a href="#">Child #3</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
         <li class="has-subnav"> 
          <a href="#">Child #4</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 

       <!--Parent #3--> 
       <li class="has-subnav"> 
        <a href="#">Parent #3</a> 
        <ul class="level-2"> 
         <li class="has-subnav"> 
          <a href="#">Child #1</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
         <li class="has-subnav"> 
          <a href="#">Child #2</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
         <li class="has-subnav"> 
          <a href="#">Child #3</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
         <li class="has-subnav"> 
          <a href="#">Child #4</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 

       <!--Parent #4--> 
       <li class="has-subnav"> 
        <a href="#">Parent #4</a> 
        <ul class="level-2"> 
         <li class="has-subnav"> 
          <a href="#">Child #1</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
         <li class="has-subnav"> 
          <a href="#">Child #2</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
         <li class="has-subnav"> 
          <a href="#">Child #3</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
         <li class="has-subnav"> 
          <a href="#">Child #4</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 

       <!--Parent #5--> 
       <li class="has-subnav"> 
        <a href="#">Parent #5</a> 
        <ul class="level-2"> 
         <li class="has-subnav"> 
          <a href="#">Child #1</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
         <li class="has-subnav"> 
          <a href="#">Child #2</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
         <li class="has-subnav"> 
          <a href="#">Child #3</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
         <li class="has-subnav"> 
          <a href="#">Child #4</a> 
          <ul class="level-3"> 
           <li><a href="#">Grandchild #1</a></li> 
           <li><a href="#">Grandchild #2</a></li> 
           <li class="has-subnav"> 
            <a href="#">Grandchild #3</a> 
            <ul class="level-4"> 
             <li><a href="#">Great-Grandchild #1</a></li> 
             <li><a href="#">Great-Grandchild #2</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 

      </ul> 
     </nav> 
    </div>

SCSS

a.menu-link { 
     float: right; 
      display: block; 
      padding: 1em; 
     } 
     .menu, .menu > ul ul { 
      clear: both; 
      -webkit-transition: all 0.3s ease-out; 
      -moz-transition: all 0.3s ease-out; 
      -ms-transition: all 0.3s ease-out; 
      -o-transition: all 0.3s ease-out; 
      transition: all 0.3s ease-out; 
     } 
     .js .menu, .js .menu > ul ul { 
      overflow: hidden; 
      max-height: 0; 
      background: rgba(0,0,0,0.1); 
     } 
     .menu.active, .js .menu > ul ul.active { 
      max-height: 55em; 
     } 
     .menu > ul { 
      border-top: 1px solid #808080; 
     } 
     .menu li a { 
      color: #000; 
      display: block; 
      padding: 0.8em; 
      border-bottom: 1px solid #808080; 
      position: relative; 
     } 
     .menu li.has-subnav > a:after { 
      content: '+'; 
      position: absolute; 
      top: 0; 
      right: 0; 
      display: block; 
      font-size: 1.5em; 
      padding: 0.25em 0.5em; 
     } 
     .menu li.has-subnav > a.active:after { 
      content: "-"; 
     } 


     @media screen and (min-width: 48.25em) { 
      .pattern { 
       overflow: visible; 
      } 
      a.menu-link { 
       display: none; 
      } 
      .js .menu, .js .menu > ul ul { 
       max-height: none; 
       overflow: visible; 
       background: none; 
      } 
      .js .menu > ul ul { 
       background: #808080; 
       display: none; 
      } 
      .js .menu > ul li:hover > ul { 
       display: block; 
      } 
      .menu ul { 
       margin: 0 0 0 -0.25em; 
       border: 0; 
     text-align: center; 
      } 
      .menu li a { 
       border: 0; 
      } 
      .menu li.has-subnav > a { 
       padding-right: 2em; 
      } 
      .menu li.has-subnav > a:after { 
       content: ">"; 
       font-size: 1em; 
       padding: 0.8em 0.5em; 
      } 
      .menu .level-1 > li.has-subnav > a:after { 
       content: "▼"; 
      } 
      .menu > ul li { 
       margin: 0 0.25em; 
      } 
      .menu > ul > li { 
       display: inline-block; 
       position: relative; 
      } 
      .menu > ul ul { 
       position: absolute; 
       top: 0; 
       left: 12em; 
       width: 12em; 
      } 
      .menu > ul ul li { 
       position: relative; 
      } 
      .menu > ul ul.level-2 { 
       top: 3em; 
       left: 0; 
      } 
     }

jQueryのJAVASCRIPT

$(document).ready(function() { 
     $('body').addClass('js'); 
      var $menu = $('#menu'), 
       $menulink = $('.menu-link'), 
       $menuTrigger = $('.has-subnav > a'); 

     $menulink.click(function(e) { 
      e.preventDefault(); 
      $menulink.toggleClass('active'); 
      $menu.toggleClass('active'); 
     }); 

     $menuTrigger.click(function(e) { 
      e.preventDefault(); 
      var $this = $(this); 
      $this.toggleClass('active').next('ul').toggleClass('active'); 
     }); 

     });

小画面のドロップダウンモードでは、一度に1つのドロップダウンサブメニューしか開きません。たとえば、誰かがParent＃1をクリックしてドロップダウンを表示した場合、Parent＃2をクリックしてそのドロップダウンを表示すると、Parent＃1が非表示になります。私はこの作業をする方法を解決することができません

出典

2016-07-04 Mike Harrison

+0

ブートストラップCSSを使用できますか？メニューオプションはそこでは簡単です。 –

+0

私はむしろこの問題を分類するためにブートストラップを使用しないでしょう - それは私が必要としない多くの余分なCSSでしょう –

答えて

0

私はそれを見つけたと思う、ちょうど$menuTrigger.click(function(e)を以下のコードに置き換えました。基本的には、現在選択されているものと同じブランチ上にあり、それを無効にし、それに応じて関連するa:hrefがある場合は、他のすべてのアクティブなul要素をチェックします（contains）。更新コードコードhere

$menuTrigger.click(function(e) { 
    e.preventDefault(); 
    var $newActive = $(this); 
    $("#menu ul.active").each(function(index) { 
     if(!$.contains($(this)[0],$newActive[0])){ 
     $(this).removeClass('active'); 
     $(this).prev('a.active').removeClass('active'); 
     } 
    }); 
    $newActive.toggleClass('active').next('ul').toggleClass('active'); 
    });

出典

2016-07-06 11:31:46

関連する問題

 関連する問題