Question

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

这就是我所拥有的： HTML

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

ABOVE是我的主要类别列表

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

这是子类别列表。

我想要点击公司的公司子类别会显示，其他子类别仍然隐藏。当我点击行业时，行业子类别将显示，其他将被隐藏。每个类别也是如此。像tab效果的东西。我可以通过在每个类别和子类别上添加类并提供.show（）和.hide（）函数来实现此目的。但是添加独特的类会很大。我也可以稍后添加更多类别和子类别。那么有什么好方法让我按照我描述的方式工作吗？如果你需要改变（添加任何类或ID）任何东西来使这项工作没问题。

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

Answer 1

您可以做的是在您的类别菜单的每个标记中设置#hash，如：

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

在＆＃34;主要类别列表＆＃34;中设置相应的ID。喜欢：

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

然后在每个标签上设置一个事件，检测#hash并仅显示正确的div。对网络上的某些东西进行一些研究可以帮助你。我不会给你完整的代码，如果你不想让其他人贬低你的问题，请亲自尝试。

使用jquery简化点击和切换功能

1 个答案: