Question

请看一下图片，这里我试着做

如果我点击“粉丝面板”，其他两个菜单将会显示。目前工作正常。这里有三个菜单可供选择。
如果点击“娱乐艺术”菜单，则需要隐藏“得分艺术”和“粉丝面板”，但是“娱乐艺术”仍然需要展示。
如果我点击“得分艺术” “粉丝面板”和“娱乐艺术”菜单需要隐藏，但< strong>“得分艺术”仍需要展示。

如果您在这里考虑代码，那就是：

<attribute ..>

网站处于预览模式

Tts Big-commerce所以菜单显示前端的动态语法我认为我们可以用javascript和jquery来查找文本并隐藏它们你的建议吗？

示例代码：

{{#each categories}}
  <li class="nav-list__item">
    <a class="nav-list__item-link" href="{{url}}" title="{{name}}">{{name}}</a>
  </li>
{/each}}

先谢谢

Answer 1

您可以尝试使用此代码 -

编辑3 - 这是最新更新的代码

/* Conditional Page Options */
var url = window.location.href;
var url = url.replace(/\//g, '');

var sub_url = location.protocol + location.host;
var page = url.replace(sub_url, '');


/* conditional click actions */
if (page == "entertain-art") {
  $("#primeNav .nav-list__item").hide();
  $("#primeNav .nav-list__item:nth-child(2)").show(); // revised
} else if (page == "score-art") {
  $("#primeNav .nav-list__item").hide();
  $("#primeNav .nav-list__item:nth-child(3)").show(); // revised
} else {
  $("#primeNav .nav-list__item-link").on('click', function() {
    var index = $(".nav-list__item-link").index(this);

    if (index == 0) {
      $("#primeNav .nav-list__item").show();
    } else {
      $("#primeNav .nav-list__item").hide();
      $(this).parent().show();
    }
  });
}
$("#primeNav .nav-list__item:nth-child(4)").show(); // revised

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="primeNav" class="nav-list nav-list--prime">
  <li class="nav-list__item">
    <a class="nav-list__item-link" href="#" title="Fan Panels">Fan Panels</a>
  </li>
  <li class="nav-list__item">
    <a class="nav-list__item-link" href="#" title="Entertain Art">Entertain Art</a>
  </li>
  <li class="nav-list__item">
    <a class="nav-list__item-link" href="#" title="Score Art">Score Art</a>
  </li>
</ul>

Answer 2

试一试。

**更新*：不添加新的班级名称

＆＃13;

//Without any new class name
$("#primeNav li").click(function(){
if($(this).text().trim()!="Fan Panels") //For Point 1, if click on FanPanel then show all
  {      
  
    $("#primeNav li").hide();  // hide all item 
    $(this).show();     // Show item which is clicked
  } 
})

//Added **menu** as classname to all anchor tag, also added another unique class name to handle individual.

//Older try
$(".menu2").click(function(){

console.log($(this).text());
if($(this).hasClass("menuFan")==false) //For Point 1, if click on FanPanel then show all
{
    $(".menu").hide();  // hide all item 
    $(this).show();     // Show item which is clicked
   }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="primeNav" class="nav-list nav-list--prime">
                            <li class="nav-list__item">
                            <a class="nav-list__item-link menu menuFan" href="#" title="Fan Panels">Fan Panels</a>
                            <li class="nav-list__item">
                            <a class="nav-list__item-link menu menuEnt" href="#" title="Entertain Art">Entertain Art</a>
                            <li class="nav-list__item">
                            <a class="nav-list__item-link menu menuScore" href="#" title="Score Art">Score Art</a>
                        </ul>

＆＃13;

主动一个主菜单一次隐藏其他

2 个答案: