如何使用JQuery使toggleClass函数正常工作?

时间:2020-07-15 09:11:54

标签: jquery

我正在创建标题,该标题附加在用作占位符的p标签之后。然后我添加一个用于样式目的的类。问题出在我用来隐藏或取消隐藏某些内容的单击功能中。每个标题显示不同的内容,默认情况下,我将隐藏此内容,但是当有人单击标题时,应通过切换类“ xx-hide”来隐藏或显示div中的内容。如果单击标题,它将显示内容,如果再次单击,将隐藏它,一切正常。 问题在于,如果我先单击一个标题然后单击另一个标题却没有先隐藏前一个标题,它就会开始从另一个标题开始奇怪地显示内容或根本不显示内容。

$(document).ready(function() {
    var head1 = "<h5>Cyber Security</h5>";
    var head2 = "<h5>Computing Theory</h5>";
    var head3 = "<h5>Computer Systems</h5>";
    var head4 = "<h5>Artificial Intelligence/Machine Learning</h5>";
    var head5 = "<h5>Software Engineering</h5>";
    var head6 = "<h5>Network</h5>";
    $("p.placeholder").after(head1, head2, head3, head4, head5, head6);
    $("h5").addClass("research-headings");
    $("h5").eq(0).click(function() {
        $("div.res-info").toggleClass("cs-hide");
    });
    $("h5").eq(1).click(function() {
        $("div.res-info").toggleClass("ct-hide");
    });
    $("h5").eq(2).click(function() {
        $("div.res-info").toggleClass("cy-hide");
    });
    $("h5").eq(3).click(function() {
        $("div.res-info").toggleClass("ai-hide");
    });
    $("h5").eq(4).click(function() {
        $("div.res-info").toggleClass("se-hide");
    });
    $("h5").eq(5).click(function() {
        $("div.res-info").toggleClass("nt-hide");
    });
});
.cs-hide {
    display: none;
}

.ct-hide {
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Below is the first two of the six divs for the headings

<div class="res-head">
    <p class="placeholder"></p>
</div>
<div class="res-info cs-hide">
    <div style="width: 33%; height: 33%; font-weight: bold; text-align: left;">
        <p>The Department of Computer Science offers four tracks of study leading to an MS or PhD:</p>
        <ul class="res-list">
            <li class="res-list-item">- Information Assurance</li>
            <li class="res-list-item">- Intelligent Systems</li>
            <li class="res-list-item">- Networks and Telecommunications</li>
            <li class="res-list-item">- Traditional Computer Science</li>
        </ul>
    </div>
    <img src="cyberSecurity.jpeg" style="width: 33%; height: 33%;">
    <div style="width: 33%; height: 33%; font-weight: bold;">
        <p>Cyber Security Research in the UT Dallas CS department is conducted within the umbrella of the Cyber Security Research and Education Institute. Its origins go back to October 2004 when UTD’s Cyber Security Research Center (CSRC) was established soon after which it received the NSA/DHS Center of Academic Excellence designation in Information Assurance Education (CAEIAE) in June 2004. After receiving the NHA/DHS CAE in Research in 2008 and a $1.8 million Scholarship for Service (SFS) award from the NSF in 2010, our efforts and in cyber security research education were combined to establish Cyber Security Research and Education Center in January 2012. Subsequently, due to significant growth in faculty hiring, research and education in cyber security, the Cyber Security Research and Education Institute was established in April 2013.</p>
    </div>
</div>
<div class="res-info ct-hide">
    <div style="width: 33%; height: 33%; font-weight: bold; text-align: left;">
        <p>The Department of Computer Science offers four tracks of study leading to an MS or PhD:</p>
        <ul class="res-list">
            <li class="res-list-item">- Information Assurance</li>
            <li class="res-list-item">- Intelligent Systems</li>
            <li class="res-list-item">- Networks and Telecommunications</li>
            <li class="res-list-item">- Traditional Computer Science</li>
        </ul>
    </div>
    <img src="computingTheory.jpeg" style="width: 33%; height: 33%;">
    <div style="width: 33%; height: 33%; font-weight: bold;">
        <p>The computing theory researchers in the Computer Science Department are focused on issues related to algorithms, combinatorics, graph theory, and cryptography. Key research areas include algorithms, combinatorics and optimization, computational biology, computational complexity, computational geometry, cryptography, and secure multiparty computations. There are a number of faculty members involved in this area. Research in the computing theory group is supported by the National Science Foundation (NSF).</p>
    </div>
</div>

0 个答案:

没有答案