Question

我创建了一个Jquery下拉列表，在选中时会添加和删除类。

隐藏菜单中有一个带链接的导航栏。我正在尝试创建一个函数，当您选择其中一个链接时，链接的名称将替换菜单按钮上的文本。

<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，则文本“菜单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

<强>更新

为您的'no-text-trans'锚点添加额外的data- *属性，如下所示：

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

存储其原始文本，然后编写document click event以捕获所有其他点击，并检查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

你可以尝试

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

get_template_directory_uri()

addClass在选中时更改html文本

2 个答案: