如何在導航中使用jquery添加導航類只有一次

Question

請幫我解決這個問題。我想在li元素中添加nav-active類只有一次意味着如果選擇了子元素，那麼父李不應該有nav-active類。我正在使用下面的代碼，但它不符合我的要求。 在此先感謝。

這裏是我的代碼：

$('ul li').find('li').click(function(){ 
 
    var $this = $(this); 
 
    $('li').removeClass('nav-active'); 
 
    $this.addClass('nav-active'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<nav id="menu" class="nav-main" role="navigation"> 
 
<ul class="nav nav-main"> 
 
    <li class="nav-parent item-b"> 
 
    <a href="#"> 
 
    <i class="icon icon-global" aria-hidden="true"></i> 
 
    <span>Global</span> 
 
    </a> 
 

 
    <ul class="nav nav-children"> 
 
    <li class="item-a"> 
 
    <a href="#"> 
 
     <span>News</span> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <span>Highlights</span> 
 
    </a> 
 
    </li> 
 
    </ul> 
 
    </li> 
 
    <li class="nav-parent"> 
 
    <a href="#"> 
 
    <i class="icon icon-document-512"></i><span>My Documents</span> 
 
    </a> 
 
    <ul class="nav nav-children" id="menu1"> 
 
    <li> 
 
    <a href="#"> 
 
     <span>My Download</span> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <span>My Wishlist</span> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <span>My New Documents</span></a> 
 
    </li> 
 
    </ul> 
 
    </li> 
 
    <li class="nav-parent"><!-- nav-expanded--> 
 
    <a class=""> 
 
    <i class="icon icon-marketing-material" aria-hidden="true"></i> 
 
    <span>Marketing Material</span> 
 
    </a> 
 
    <ul class="nav nav-children" id="menu1"> 
 
    <li> 
 
     <a href="#"> 
 
     <span>Batch Download</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <span>Upload</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <span>Edit/Delete</span></a> 
 
     </li> 
 
     <li> 
 
     <a href="#" onClick='document.getElementById("preview-frame").src="new-uploads.html";'> 
 
     <span>New Uploads</span></a> 
 
     </li> 
 
     <li> 
 
     <a href="#" onClick='document.getElementById("preview-frame").src="revision.html";'> 
 
     <span>Revisions</span></a> 
 
     </li> 
 
     <li> 
 
     <a href="#" onClick='document.getElementById("preview-frame").src="top-download.html";'> 
 
      <span>Top Downloads</span></a> 
 
     </li> 
 
     </ul> 
 
     </li> 
 

 
     <li> 
 
     <a href="#" onClick='document.getElementById("preview-frame").src="blank.html";'> 
 
     <i class="icon icon-11111" aria-hidden="true"></i> 
 
     <span>GML Forum</span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#" onClick='document.getElementById("preview-frame").src="index - Copy.html";'> 
 
     <i class="icon icon-market-research" aria-hidden="true"></i> 
 
     <span>Market Research</span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
     <i class="icon icon-market-access-2" aria-hidden="true"></i> 
 
     <span>Market Access</span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
     <i class="icon icon-compete" aria-hidden="true"></i> 
 
     <span>Competetive Intelligence</span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
     <i class="icon icon-portal" aria-hidden="true"></i> 
 
     <span>Portal Tutorial</span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
     <i class="icon icon-new-product-launch" aria-hidden="true"></i> 
 
     <span>New Product Launch</span> 
 
     </a> 
 
     </li>          
 
     <li class="nav-parent"> 
 
     <a href="#"> 
 
     <i class="icon icon-portal-admin"></i><span>Portal Administration</span> 
 
     </a> 
 
     <ul class="nav nav-children" id="menu1"> 
 
     <li> 
 
      <a href="#" onClick='document.getElementById("preview-frame").src="abbot-social-media.html";'> 
 
      <span>Social Media</span> 
 
      </a> 
 
     </li> 
 
     </ul> 
 
     </li> 
 

 
     <li><hr class="separator" /></li> 
 
     <li><a href="#"><i class="fa licon-calendar" aria-hidden="true" style="font-size:24px;"></i>Upcoming Events</a></li 
 
     ></ul> 
 
     </nav>

Answer 1

在你當前的例子，如果你會做一個的console.log（$（本），它會告訴你在控制檯元素，如果你點擊一個孩子元素，一個用於子元素，另一個用於其父元素，這稱爲事件冒泡。您需要通過停止傳播事件來處理事件冒泡

試試這個。

$('li').click(function(event){ 
 
    event.stopPropagation() 
 
    var $this = $(this); 
 
    $('li').removeClass('nav-active'); 
 
    $this.addClass('nav-active'); 
 
});

.nav-active a 
 
{ 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="menu" class="nav-main" role="navigation"> 
 
           <ul class="nav nav-main"> 
 
            <li class="nav-parent item-b"> 
 
             <a href="#"> 
 
              <i class="icon icon-global" aria-hidden="true"></i> 
 
              <span>Global</span> 
 
             </a> 
 

 
             <ul class="nav nav-children"> 
 
              <li class="item-a"> 
 
               <a href="#"> 
 
                <span>News</span> 
 
               </a> 
 
              </li> 
 
              <li> 
 
               <a href="#"> 
 
                <span>Highlights</span> 
 
               </a> 
 
              </li> 
 
             </ul> 
 
            </li> 
 
            <li class="nav-parent"> 
 
             <a href="#"> 
 
              <i class="icon icon-document-512"></i><span>My Documents</span> 
 
             </a> 
 
             <ul class="nav nav-children" id="menu1"> 
 
              <li> 
 
               <a href="#"> 
 
                <span>My Download</span> 
 
               </a> 
 
              </li> 
 
              <li> 
 
               <a href="#"> 
 
                <span>My Wishlist</span> 
 
               </a> 
 
              </li> 
 
              <li> 
 
               <a href="#"> 
 
                <span>My New Documents</span></a> 
 
              </li> 
 
             </ul> 
 
            </li> 
 
            <li class="nav-parent"><!-- nav-expanded--> 
 
             <a class=""> 
 
              <i class="icon icon-marketing-material" aria-hidden="true"></i> 
 
              <span>Marketing Material</span> 
 
             </a> 
 
             <ul class="nav nav-children" id="menu1"> 
 
              <li> 
 
               <a href="#"> 
 
                <span>Batch Download</span> 
 
               </a> 
 
              </li> 
 
              <li> 
 
               <a href="#"> 
 
                <span>Upload</span> 
 
               </a> 
 
              </li> 
 
              <li> 
 
               <a href="#"> 
 
                <span>Edit/Delete</span></a> 
 
              </li> 
 
              <li> 
 
               <a href="#" onClick='document.getElementById("preview-frame").src="new-uploads.html";'> 
 
                <span>New Uploads</span></a> 
 
              </li> 
 
              <li> 
 
               <a href="#" onClick='document.getElementById("preview-frame").src="revision.html";'> 
 
                <span>Revisions</span></a> 
 
              </li> 
 
              <li> 
 
               <a href="#" onClick='document.getElementById("preview-frame").src="top-download.html";'> 
 
                <span>Top Downloads</span></a> 
 
              </li> 
 
             </ul> 
 
            </li> 
 

 
            <li> 
 
             <a href="#" onClick='document.getElementById("preview-frame").src="blank.html";'> 
 
              <i class="icon icon-11111" aria-hidden="true"></i> 
 
              <span>GML Forum</span> 
 
             </a> 
 
            </li> 
 
            <li> 
 
             <a href="#" onClick='document.getElementById("preview-frame").src="index - Copy.html";'> 
 
              <i class="icon icon-market-research" aria-hidden="true"></i> 
 
              <span>Market Research</span> 
 
             </a> 
 
            </li> 
 
            <li> 
 
             <a href="#"> 
 
              <i class="icon icon-market-access-2" aria-hidden="true"></i> 
 
              <span>Market Access</span> 
 
             </a> 
 
            </li> 
 
            <li> 
 
             <a href="#"> 
 
              <i class="icon icon-compete" aria-hidden="true"></i> 
 
              <span>Competetive Intelligence</span> 
 
             </a> 
 
            </li> 
 
            <li> 
 
             <a href="#"> 
 
              <i class="icon icon-portal" aria-hidden="true"></i> 
 
              <span>Portal Tutorial</span> 
 
             </a> 
 
            </li> 
 
            <li> 
 
             <a href="#"> 
 
              <i class="icon icon-new-product-launch" aria-hidden="true"></i> 
 
              <span>New Product Launch</span> 
 
             </a> 
 
            </li>          
 
            <li class="nav-parent"> 
 
             <a href="#"> 
 
              <i class="icon icon-portal-admin"></i><span>Portal Administration</span> 
 
             </a> 
 
             <ul class="nav nav-children" id="menu1"> 
 
              <li> 
 
               <a href="#" onClick='document.getElementById("preview-frame").src="abbot-social-media.html";'> 
 
                <span>Social Media</span> 
 
               </a> 
 
              </li> 
 
             </ul> 
 
            </li> 
 

 
            <li><hr class="separator" /></li> 
 
            <li><a href="#"><i class="fa licon-calendar" aria-hidden="true" style="font-size:24px;"></i>Upcoming Events</a></li 
 
           ></ul> 
 
          </nav>

Answer 2

主要的想法是運行點擊功能只有一次，因爲當你點擊子元素的父元素也被自動地之後被點擊等等$(this)最終選擇父項，每次子元素被點擊。

我爲.nav-active類添加了css以顯示代碼的工作。嘗試這個。

$(document).ready(function(){ 
 
    $('nav li').one("click",function(){ 
 
    $('nav li').removeClass('nav-active'); 
 
    $(this).addClass('nav-active'); 
 
    }) 
 
})

.nav-active>a>span{ 
 
    font-size:20px; 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="menu" class="nav-main" role="navigation"> 
 
<ul class="nav nav-main"> 
 
    <li class="nav-parent item-b"> 
 
    <a href="#"> 
 
    <i class="icon icon-global" aria-hidden="true"></i> 
 
    <span>Global</span> 
 
    </a> 
 

 
    <ul class="nav nav-children"> 
 
    <li class="item-a"> 
 
    <a href="#"> 
 
     <span>News</span> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <span>Highlights</span> 
 
    </a> 
 
    </li> 
 
    </ul> 
 
    </li> 
 
    <li class="nav-parent"> 
 
    <a href="#"> 
 
    <i class="icon icon-document-512"></i><span>My Documents</span> 
 
    </a> 
 
    <ul class="nav nav-children" id="menu1"> 
 
    <li> 
 
    <a href="#"> 
 
     <span>My Download</span> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <span>My Wishlist</span> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <span>My New Documents</span></a> 
 
    </li> 
 
    </ul> 
 
    </li> 
 
    <li class="nav-parent"><!-- nav-expanded--> 
 
    <a class=""> 
 
    <i class="icon icon-marketing-material" aria-hidden="true"></i> 
 
    <span>Marketing Material</span> 
 
    </a> 
 
    <ul class="nav nav-children" id="menu1"> 
 
    <li> 
 
     <a href="#"> 
 
     <span>Batch Download</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <span>Upload</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <span>Edit/Delete</span></a> 
 
     </li> 
 
     <li> 
 
     <a href="#" onClick='document.getElementById("preview-frame").src="new-uploads.html";'> 
 
     <span>New Uploads</span></a> 
 
     </li> 
 
     <li> 
 
     <a href="#" onClick='document.getElementById("preview-frame").src="revision.html";'> 
 
     <span>Revisions</span></a> 
 
     </li> 
 
     <li> 
 
     <a href="#" onClick='document.getElementById("preview-frame").src="top-download.html";'> 
 
      <span>Top Downloads</span></a> 
 
     </li> 
 
     </ul> 
 
     </li> 
 

 
     <li> 
 
     <a href="#" onClick='document.getElementById("preview-frame").src="blank.html";'> 
 
     <i class="icon icon-11111" aria-hidden="true"></i> 
 
     <span>GML Forum</span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#" onClick='document.getElementById("preview-frame").src="index - Copy.html";'> 
 
     <i class="icon icon-market-research" aria-hidden="true"></i> 
 
     <span>Market Research</span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
     <i class="icon icon-market-access-2" aria-hidden="true"></i> 
 
     <span>Market Access</span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
     <i class="icon icon-compete" aria-hidden="true"></i> 
 
     <span>Competetive Intelligence</span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
     <i class="icon icon-portal" aria-hidden="true"></i> 
 
     <span>Portal Tutorial</span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
     <i class="icon icon-new-product-launch" aria-hidden="true"></i> 
 
     <span>New Product Launch</span> 
 
     </a> 
 
     </li>          
 
     <li class="nav-parent"> 
 
     <a href="#"> 
 
     <i class="icon icon-portal-admin"></i><span>Portal Administration</span> 
 
     </a> 
 
     <ul class="nav nav-children" id="menu1"> 
 
     <li> 
 
      <a href="#" onClick='document.getElementById("preview-frame").src="abbot-social-media.html";'> 
 
      <span>Social Media</span> 
 
      </a> 
 
     </li> 
 
     </ul> 
 
     </li> 
 

 
     <li><hr class="separator" /></li> 
 
     <li><a href="#"><i class="fa licon-calendar" aria-hidden="true" style="font-size:24px;"></i>Upcoming Events</a></li 
 
     ></ul> 
 
     </nav>