如何使用 jquery 隐藏/显示答案

【问题标题】：how to hide/show using jquery如何使用 jquery 隐藏/显示
【发布时间】：2019-04-30 07:13:30
【问题描述】：

我的菜单有不同的类别，每个类别都有不同的部分。如果当我点击部分一个类别时，相关部分应显示，而铰接部分应隐藏。我不想要更多代码需要减少代码行请任何人帮助我

我的html代码

 <ul>
  <li><a class="cat_1" href="#home" onclick="category(1)">Section One</a></li>
  <li><a class="cat_2" href="#news" onclick="category(2)">Section Two</a></li>
  <li><a class="cat_3" href="#contact" onclick="category(3)">Section three</a></li>
  <li><a class="cat_4" href="#about" onclick="category(4)">Section four</a></li>
</ul>

<div class="subcat_1" style="display: none;">
  <h1>Section One</h1>
  <p>Section One</p>
</div>

<div class="subcat_2" style="display: none;">
  <h1>Section Two</h1>
  <p>Section Two</p>
  <p>Section Two</p>
  <p>Section Two</p>
  <p>Section Two</p>
</div>

<div class="subcat_2" style="display: none;">
  <h1>Section Two</h1>
  <p>Section Two</p>
</div>

<div class="subcat_3" style="display: none;">
  <h1>Section three</h1>
  <p>Section three</p>
</div>
<div class="subcat_4" style="display: none;">
  <h1>Section four</h1>
  <p>Section four</p>
</div>
<div class="subcat_4" style="display: none;">
  <h1>Section four</h1>
  <p>Section four</p>
</div>

jQuery 代码

function category(val){
    $(".subcat_"+ val).show();

}

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以在显示特定部分之前使用Attribute Starts With Selector 隐藏所有内容：

function category(val){
  $("[class^=subcat_").hide();
  $(".subcat_"+ val).show();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a class="cat_1" href="#home" onclick="category(1)">Section One</a></li>
  <li><a class="cat_2" href="#news" onclick="category(2)">Section Two</a></li>
  <li><a class="cat_3" href="#contact" onclick="category(3)">Section three</a></li>
  <li><a class="cat_4" href="#about" onclick="category(4)">Section four</a></li>
</ul>

<div class="subcat_1" style="display: none;">
  <h1>Section One</h1>
  <p>Section One</p>
</div>

<div class="subcat_2" style="display: none;">
  <h1>Section Two</h1>
  <p>Section Two</p>
  <p>Section Two</p>
  <p>Section Two</p>
  <p>Section Two</p>
</div>

<div class="subcat_2" style="display: none;">
  <h1>Section Two</h1>
  <p>Section Two</p>
</div>

<div class="subcat_3" style="display: none;">
  <h1>Section three</h1>
  <p>Section three</p>
</div>
<div class="subcat_4" style="display: none;">
  <h1>Section four</h1>
  <p>Section four</p>
</div>
<div class="subcat_4" style="display: none;">
  <h1>Section four</h1>
  <p>Section four</p>
</div>

【讨论】：

非常感谢您为我节省了时间，这是完美的工作，正如我所期望的那样再次感谢 Mamun

【解决方案2】：

你试过了吗

$(".subcat_"+ val).toggle();

【讨论】：

你能再具体一点吗？

【解决方案3】：

尝试使用 Jquery 设置 css 属性。

所以：

$(".subcat_"+ val).css("display", "block");

这样的？不过，您必须在其他函数中将其设置回 .css("display", "none")。

【讨论】：

【解决方案4】：

您可以将其用于显示/隐藏部分

function category(val){
    $(".subcat_"+ val).show();
    $("div[class^='subcat_']").each(function(index, item){
       //console.log(1)
       if(!$(this).hasClass("subcat_"+ val)){
          $(this).hide();
       }
    })
}

function category(val){
    $(".subcat_"+ val).show();
    $("div[class^='subcat_']").each(function(index, item){
       //console.log(1)
       if(!$(this).hasClass("subcat_"+ val)){
          $(this).hide();
       }
    })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a class="cat_1" href="#home" onclick="category(1)">Section One</a></li>
  <li><a class="cat_2" href="#news" onclick="category(2)">Section Two</a></li>
  <li><a class="cat_3" href="#contact" onclick="category(3)">Section three</a></li>
  <li><a class="cat_4" href="#about" onclick="category(4)">Section four</a></li>
</ul>

<div class="subcat_1" style="display: none;">
  <h1>Section One</h1>
  <p>Section One</p>
</div>

<div class="subcat_2" style="display: none;">
  <h1>Section Two</h1>
  <p>Section Two</p>
  <p>Section Two</p>
  <p>Section Two</p>
  <p>Section Two</p>
</div>

<div class="subcat_2" style="display: none;">
  <h1>Section Two</h1>
  <p>Section Two</p>
</div>

<div class="subcat_3" style="display: none;">
  <h1>Section three</h1>
  <p>Section three</p>
</div>
<div class="subcat_4" style="display: none;">
  <h1>Section four</h1>
  <p>Section four</p>
</div>
<div class="subcat_4" style="display: none;">
  <h1>Section four</h1>
  <p>Section four</p>
</div>

【讨论】：