如何在导航中使用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>