顯示和隱藏H2使用jQuery

Question

任何人都可以就如何隱藏有一個類名「主動」 H2和顯示幫助，如果H2刪除類「活動」

這裏是我的示例代碼：

我可以隱藏h2元素，但是我不能顯示h2元素。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 


<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/> 
<link rel="stylesheet" href="css/template.css" type="text/css"/>  
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"> 
    </script> 
    <script src="js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"> 
    </script> 
    <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"> 
    </script> 
<script type="text/javascript"> 
jQuery(document).ready(function ($) { 
    //Set default open/close settings 
    var divs=$('.accordion>div').hide(); //Hide/close all containers 

    var h2s=$('.accordion>h2').click(function() { 
     h2s.not(this).removeClass('active') 
     //alert("TRY"); 
     $(this).toggleClass('active') 
     divs.not($(this).next()).slideUp() 
     $(this).next().slideToggle() 
     return false; //Prevent the browser jump to the link anchor 
    }); 

     jQuery('h2.acc_trigger').show(); 


    $('h2.acc_trigger').click(function() { 
     $('h2.acc_trigger .arrhead').css('content','url(images/arrowleft.png)'); 
    if($(this).hasClass('active')){ 
      $('h2.acc_trigger.active .arrhead').css('content','url(images/arrowdown.png)'); 
      $(this).hide(); 
     }else{ 
      $('h2').hasClass('h2.acc_trigger').show(); 
     } 

    }); 





}); 
</script> 

<style type="text/css"> 
h2.acc_trigger { 
    padding: 0; 
    margin: 0 0 5px -42px; 
    height: 46px; 
    line-height: 46px; 
    width: 800px; 
    font-size: 21px; 
    font-weight: normal; 
    float: left; 
    margin-bottom:0; 
} 

.third{ 
    /*content: url(images/arrowleft.png);*/ 
    position: absolute; 
    margin: 0 0 0 640px; 
    float: left; 
    display: block; 
    width: 315px; 
} 

h2.acc_trigger.active{ 
/*content: url(images/arrowdown.png);*/ 
} 

h2.acc_trigger a { 
    color: #222; 
    text-decoration: none; 
    display: block; 
    padding: 0 0 0 50px; 
} 
h2.acc_trigger.active a { 
    color: #FF0000; 
} 
h2.acc_trigger a:hover { 
    color: #999; 
} 
h2.acc_trigger a:active, h2.active { 
    color:#ED2224; 

} 
h2.active { 
    background-position: left bottom; 
    /*content: url(images/arrowdown.png);*/ 
} 
.acc_container { 
    margin: 0 0 5px; 
    padding: 0; 
    overflow: hidden; 
    font-size: 1.2em; 
    width: 835px; 
    clear: both; 
    background: #f0f0f0; 
    border: 1px solid #d6d6d6; 
    -webkit-border-bottom-right-radius: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomright: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
    border-top:none; 
} 
.acc_container .block { 
    padding: 20px; 
} 

.accordion{ 
    width: 150px; 
    margin: 80px 0 0 270px; 
} 

.content{ 
/*position:relative;*/ 
display:block; 
/*margin-top:15px;*/ 
margin-top:45px; 
} 

.inputfield{ 
border-radius:5px; 
margin-left:165px; 
position:relative; 
margin-top: -26px; 
width: 205px; 
height: 30px; 
display:inherit; 
} 

.rightblock{ 
position: relative; 
margin-left: 400px; 
/* margin-top: -78px; */ 
bottom: 215px; 
} 

.sec{ 
width:620px; 
} 

.tattoo{ 
font-size:35px; 
/*text-align:center; 
margin-left:27px;*/ 

width: 150px; 
margin-left: 295px; 
} 
.tattoo p{ 
font-size: 20px; 
margin-top: 0px; 
width: 150px; 
margin-left: 270px; 
} 

.live{ 
position: absolute; 
/* margin-top: -65px; */ 
margin: -65px 0 0 60%; 
font-size: 27px; 
} 

.note{ 
position: absolute; 
width: 315px; 
margin: 25px 0 0 10px; 
text-align: center; 
background-color: #303030; 
color: white; 
border-radius: 5px; 
padding: 18px; 
font-size: 15px; 
} 

.line{ 
border: 5px black; 
width: 840px; 
background-color: black; 
margin: -10px 0 0 -8px; 
position: absolute; 
height: 1px; 
display: block; 
} 

.submit{ 
top: 15px; 
position: relative; 
width: 110px; 
height: 30px; 
border-radius: 5px; 
font-size: 18px; 
} 

label.error{ 
margin: -25px 0 0 394px; 
position: absolute; 
} 

.error{ 
border-color:red; 
color:red; 

} 

.title{ 
position: absolute; 
left: 278px; 
margin-top: 20px; 
font-weight: bold; 
font-size: 25px; 
} 

.first{ 
position:absolute; 
margin-left: 60px; 
width: 315px; 
} 

.second{ 
position:absolute; 
margin-left: 290px; 
width: 315px; 
} 

.third{ 

} 

</style> 

    <script type='text/javascript'> 
     jQuery(document).ready(function(){ 
      jQuery("#myform").validationEngine('attach', { 
       onValidationComplete: function(form, status){ 
        alert("The form status is: " +status+", it will never submit"); 
       } 
      }) 
     }); 


    </script> 

<div class="title">Account Settings</div> 
<form action="" id="myform" method="post"> 
<div class="accordion"> 
<h2 class="acc_trigger"><a href="#"><label class="first">Name</label><label class="second">Juan Dela Cruz</label><label class="third">Edit</label></a></h2> 
<div class="acc_container"> 
    <div class="block"> 
     <div class="leftblock"> 
      <label class="content" id="username">New username: <input type="text" class="validate[required] text-input inputfield" id="inputusername" name="inputusername"></label> 
      <label class="content" id="password">New password: <input type="text" class="validate[required] text-input inputfield" id="inputpassword" name="inputpassword"></label> 
      <label class="content" id="password">Re-type password: <input type="text" class="validate[required] text-input inputfield" id="inputrepassword" name="inputrepassword"></label> 
     </div> 
    </div> 
</div> 
<h2 class="acc_trigger"><a href="#"><label class="first">Username</label><label class="second">globeJuan</label><label class="third">Edit</label></a></h2> 
<div class="acc_container"> 
    <div class="block"> 
     <div class="leftblock"> 
      <label class="content" id="username">New username: <input type="text" class="validate[required] text-input inputfield" id="inputusername" name="inputusername"></label> 
      <label class="content" id="password">New password: <input type="text" class="validate[required] text-input inputfield" id="inputpassword" name="inputpassword"></label> 
      <label class="content" id="password">Re-type password: <input type="text" class="validate[required] text-input inputfield" id="inputrepassword" name="inputrepassword"></label> 
     </div> 
    </div> 
</div> 
<h2 class="acc_trigger"><a href="#"><label class="first">Password</label><label class="second">password last changed on 06/13/2013</label><label class="third">Edit</label></a></h2> 
<div class="acc_container"> 
    <div class="block"> 
     <div class="leftblock"> 
      <label class="content" id="username">New username: <input type="text" class="validate[required] text-input inputfield" id="inputusername" name="inputusername"></label> 
      <label class="content" id="password">New password: <input type="text" class="validate[required] text-input inputfield" id="inputpassword" name="inputpassword"></label> 
      <label class="content" id="password">Re-type password: <input type="text" class="validate[required] text-input inputfield" id="inputrepassword" name="inputrepassword"></label> 
     </div> 
    </div> 
</div> 
<h2 class="acc_trigger"><a href="#"><label class="first">Email Address</label><label class="second">juandc@email.com</label><label class="third">Edit</label></a></h2> 
<div class="acc_container"> 
    <div class="block"> 
     <div class="leftblock"> 
      <label class="content" id="username">New username: <input type="text" class="validate[required] text-input inputfield" id="inputusername" name="inputusername"></label> 
      <label class="content" id="password">New password: <input type="text" class="validate[required] text-input inputfield" id="inputpassword" name="inputpassword"></label> 
      <label class="content" id="password">Re-type password: <input type="text" class="validate[required] text-input inputfield" id="inputrepassword" name="inputrepassword"></label> 
     </div> 
    </div> 
</div> 
<h2 class="acc_trigger"><a href="#"><label class="first">Mobile Number</label><label class="second">09271234567</label><label class="third">Edit</label></a></h2> 
<div class="acc_container"> 
    <div class="block"> 
     <div class="leftblock"> 
      <label class="content" id="username">New username: <input type="text" class="validate[required] text-input inputfield" id="inputusername" name="inputusername"></label> 
      <label class="content" id="password">New password: <input type="text" class="validate[required] text-input inputfield" id="inputpassword" name="inputpassword"></label> 
      <label class="content" id="password">Re-type password: <input type="text" class="validate[required] text-input inputfield" id="inputrepassword" name="inputrepassword"></label> 
     </div> 
    </div> 
</div> 
</div> 
</form> 

我可以隱藏h2元素，但我不能顯示h2元素提前 感謝。

Answer 1

Hello選擇器hasClass（）期望您搜索的類的名稱。 它應該是這樣的：

$('h2') . hasClass('acc_trigger') . show(); 

無論如何，檢查該解決方案：

JsFiddle