Question

我想用jquery隐藏链接，如果用户第一次点击按钮，链接将隐藏（通过添加类隐藏），但是应该第二次显示点击按钮（删除类隐藏）。它是一个崩溃切换功能。当我第一次点击按钮时，它会隐藏，但第二次，它不起作用

HTML

puts()

JAVASCRIPT

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

Answer 1

您可以隐藏这样的节目链接：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试一试：

<script>
$(document).ready(function(){
  $('.sidebar-collapse').click(function(){
	$('#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>

这将是有效的..

Answer 3

您可以使用jQuerys toggleClass()来打开/关闭元素的单个类：

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

显示/隐藏与jquery的链接

3 个答案: