jqueryとのリンクを表示/非表示

Question

ユーザーがボタンを最初にクリックするとリンクが非表示になります（によってクラスが追加されました）、クリ​​ックボタンが2回目に表示されるはずです（クラスを隠す）。それは倒壊 - トグル機能です。 私はボタンを初めてクリックすると、それが非表示になりますが、2番目の時間は、あなたが/に単一のクラスを切り替えることがjQuerys toggleClass()を使用することができます

HTML

 <!--BUTTON --> 
<div class="sidebar-collapse" style="" id="sidebar-collapse"> 
       <a href="#" class="sidebar-collapse-icon with-animation"> 

        <i class="entypo-menu"></i> 
       </a> 
      </div> 
<a href="mysite_url" id="logo-title"> <br> My Site Name </a> 

JAVASCRIPT

<script> 
    var logo_title = $('a#logo-title'); 
    $('div#sidebar-collapse').click(function(){ 
     logo_title.addClass('hidden-md hidden-lg cj_inspired'); 
     if($('div#sidebar-collapse').click() && logo_title.hasClass('cj_inspired')){ 
      $('a#logo-title').removeClass('hidden-md hidden-lg cj_inspired'); 
     } 
    }) 
</script> 

Answer 1

あなたはこのようなショーリンクを非表示にすることができます：

$('div#sidebar-collapse').click(function(){ 
 
    if ($("#logo-title").is(":visible")) { 
 
    $("#logo-title").hide(); 
 
    } else if ($("#logo-title").is(":hidden")) { 
 
    $("#logo-title").show(); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="sidebar-collapse" style="" id="sidebar-collapse"> 
 
    <a href="#" class="sidebar-collapse-icon with-animation"> 
 
     Click    
 
     <i class="entypo-menu"></i> 
 
    </a> 
 
</div> 
 
<a href="mysite_url" id="logo-title"> <br> My Site Name </a>

Answer 2

を動作しません。要素のオフ：

<script> 
    var logo_title = $('a#logo-title'); 
    $('div#sidebar-collapse').click(function(){ 
     logo_title.toggleClass('hidden-md').toggleClass('hidden-lg').toggleClass('cj_inspired'); 
    }); 
</script> 

単一のクラスを使用して非表示スタイルを定義できる場合は、よりエレガントです。

続きを読むtoggleClass()hereを参照してください。

Answer 3

はそれを試してみてください。

<script> 
 
$(document).ready(function(){ 
 
    $('.sidebar-collapse').click(function(){ 
 
\t $('#logo-title').toggle(); 
 
}); 
 
}); 
 
</script>

<div class="sidebar-collapse" style="" id="sidebar-collapse"> 
 
       <a href="#" class="sidebar-collapse-icon with-animation"> 
 

 
        <i class="entypo-menu"></i>Click 
 
       </a> 
 
      </div> 
 
<a href="mysite_url" id="logo-title"> <br> My Site Name </a>

はこれが仕事になります...