addClass在選中時更改html文本

Question

我創建了一個Jquery下拉列表，它在選中時添加和刪除類。

JSFIDDLE

裏面的隱藏菜單是一個帶有鏈接的導航欄。我試圖創建一個功能，當您選擇鏈接的名稱替換菜單按鈕上的文本鏈接之一。

<div class="btn-container menu small-4 medium-2"> 
    <a class="inline-block btn no-text-trans">sector</a> 
    <i class="fa fa-chevron-down"></i> 
    <article class="pane inactive"> 
     <nav> 
      <ul> 
       <li><a href="#">Menu 1</a></li> 
       <li><a href="#">Menu 2</a></li> 
       <li><a href="#">Menu 3</a></li> 
       <li><a href="#">Menu 4</a></li> 
      </ul> 
     </nav> 
    </article> <!-- PANE ENDS HERE --> 
</div> <!-- BTN CONTAINER ENDS HERE --> 

例如，如果按鈕菜單中選擇一個，文本「菜單1」替換文本「部門」

Answer 1

添加class到所有隱藏菜單<a>說class="links"，寫一個事件來捕獲點擊如下圖所示：

$(".links").on('click',function(){ 
    $(this).closest('article').siblings('.no-text-trans').text($(this).text()); 
}); 

更新HTML

<article class="pane inactive"> 
    <nav> 
     <ul> 
      <li><a class="links" href="#">Menu 1</a></li> 
      <li><a class="links" href="#">Menu 1</a></li> 
      <li><a class="links" href="#">Menu 1</a></li> 
      <li><a class="links" href="#">Menu 1</a></li> 
     </ul> 
    </nav> 
</article> <!-- PANE ENDS HERE --> 

DEMO

---

UPDATE

添加額外的數據 - *屬性您'no-text-trans'錨像一個下面：

<a class="inline-block btn no-text-trans" data-original="products">products</a> 

保存它的原始文本，然後寫一個document click event來捕獲所有其他點擊並檢查wh醚target是錨或其children如果是做的默認操作人換掉文字，如下：

$(document).on('click',function(e){ 
    //check if targeted element is link or its children 
    if($(e.target).hasClass('links') || $(e.target).hasClass('no-text-trans')) 
     return; 
    //if not replace each anchor with its original text taking from its `data-original` attribute 
    $('.no-text-trans').each(function(){ 
     $(this).text($(this).data('original')).siblings('article').addClass('inactive'); 
    }); 
}); 

Updated DEMO

Answer 2

您可以嘗試

$(document).click(function(e) { 
 
    var $target = $(e.target), 
 
    $ct = $target.closest('.btn-container'), 
 
    $pane = $ct.find('.pane.inactive'); 
 
    $pane.add($('.pane:not(.inactive)')).toggleClass('inactive'); 
 
    if ($target.closest('.pane a').length) { 
 
    $ct.find('.btn').text($target.text()) 
 
    } 
 
});

.inactive { 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="btn-container menu small-4 medium-2"> 
 
    <a class="inline-block btn no-text-trans">sector</a> 
 
    <i class="fa fa-chevron-down"></i> 
 
    <article class="pane inactive"> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#">Menu 1</a></li> 
 
     <li><a href="#">Menu 2</a></li> 
 
     <li><a href="#">Menu 3</a></li> 
 
     <li><a href="#">Menu 4</a></li> 
 
     </ul> 
 
    </nav> 
 
    </article> <!-- PANE ENDS HERE --> 
 
</div> <!-- BTN CONTAINER ENDS HERE --> 
 

 

 
<div class="btn-container menu small-4 medium-2"> 
 
    <a class="inline-block btn no-text-trans">products</a> 
 
    <i class="fa fa-chevron-down"></i> 
 
    <article class="pane inactive"> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#"><p>Menu 1</p></a></li> 
 
     <li><a href="#"><p>Menu 2</p></a></li> 
 
     <li><a href="#"><p>Menu 3</p></a></li> 
 
     <li><a href="#"><p>Menu 4</p></a></li> 
 
     </ul> 
 
    </nav> 
 
    </article> <!-- PANE ENDS HERE --> 
 
</div> <!-- BTN CONTAINER ENDS HERE -->