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 -->