简化点击和切换功能与jquery

Simplifying click and toggle function with jquery

本文关键字：功能 jquery      更新时间：2023-09-26

我需要一些帮助，使jQuery的点击和切换功能被简化。

JS小提琴

这是我的: 

      <div class="category-list-content">
                <h4><strong>Category</strong></h4>
                <ul class="category-list">
                    <li class="">
                        <a href="#">Company</a>
                    </li>
                    <li class="">
                        <a href="#">Industry</a>
                    </li>
                    <li class="">
                        <a href="#">Job Title</a>
                    </li>
                    <li class="">
                        <a href="#">Tenure</a>
                    </li>
                    <li class="">
                        <a href="#">Seniority Level</a>
                    </li>
                </ul>
         </div>

以上是我的主要类别列表

<div class="category-list-sub-content">
            <h4><strong>Sub Category</strong></h4>
            <ul class="segmentation-list ">
                <p>Company</p>
                <li class=""><a href="#">9lenses</a></li>
            </ul>
            <ul class="category-list ">
                <p>Industry</p>
                <li class=""><a href="#">Avation</a></li>
                <li class=""><a href="#">Software</a></li>
                <li class=""><a href="#">Mobile</a></li>
                <li class=""><a href="#">Cars</a></li>
             </ul>
             <ul class="category-list">
                 <p>Job Title</p>
                <li class=""><a href="#">UI Developer</a></li>
                <li class=""><a href="#">UX Developer</a></li>
                <li class=""><a href="#">Designers</a></li>
                <li class=""><a href="#">Web Developers</a></li>
             </ul>

              <ul class="category-list">
                  <p>Tenure</p>
                <li class=""><a href="#"> 5 years</a></li>
                <li class=""><a href="#">&lt; 5 years</a></li>
                <li class=""><a href="#">&gt; 5 years</a></li>
                <li class=""><a href="#">10 years</a></li>
                <li class=""><a href="#">1 year</a></li>
              </ul>

             <ul class="category-list ">
                 <p>Seniority Level</p>
                <li class=""><a href="#">Team Lead</a></li>
                <li class=""><a href="#">Juniour Employee</a></li>
                <li class=""><a href="#">Intern</a></li>
                <li class=""><a href="#">Director</a></li>
                <li class=""><a href="#">CEO</a></li>
              </ul>
        </div>

这是子类别列表。

我想做一些像当我点击公司公司的子类别将显示和其他子类别保持隐藏。当我点击行业，行业子类别将显示和其他将被隐藏。每个类别都是如此。比如标签效果。我可以通过在每个类别和子类别上添加类并提供.show()和.hide()函数来实现这一点。但是添加独特的类将是巨大的。此外，我可能会添加更多的类别和子类别以后。有没有什么好办法能让它像我描述的那样工作呢?如果您需要更改(添加任何类或ID)任何东西以使此工作，这将是好的。

任何帮助将不胜感激。我真的很痛苦。

你可以做的是在你的分类菜单的每个标签中设置一个#hash，如:

<li class="">
    <a href="#company">Company</a>
</li>

在"主分类列表"中设置相应的id，如:

<ul class="segmentation-list " id="company">
    <p>Company</p>

然后在每个标签上设置一个事件，检测#散列并只显示正确的div。对网络的一些研究可能会对你有所帮助。我不会给你完整的代码，如果你不想让别人否决你的问题，你可以自己做

相关文章：