Question

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

我的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();

}

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

Answer 2

您尝试过

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

？

Answer 3

尝试使用Jquery设置css属性。

所以：

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

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

Answer 4

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

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>

def Collatz(numBer):
        if numBer%2 == 0:
            return numBer//2
        else:
            return 3*numBer+1
            print(numBer)       #this code is unreachale
print('Please input the number:')
numBer = int(input())
while numBer != 1:
    Collatz(numBer)
    print(Collatz(numBer))      #because the former code are unreachable,so I write this to print the results
    numBer = Collatz(numBer)

如何使用jQuery隐藏/显示

4 个答案: