Question

我很擅长使用jquery，如果有人可以帮助我，我会非常感激。

我的网上有一些元素：

.hidden {display:none}

然后我创建了一个看起来像这样的链接：

<a href="javascript:test()">Test</a>

到目前为止我设法编写的脚本是：

<script type="text/javascript">        
    function test() {                   
        $(".hidden").css({ display: "inherit" });
    };
</script>

到目前为止，它按预期工作但是...如果我再次点击链接，再显示：none，我怎么能做到？

提前很多，请原谅我可怜的英语。

Answer 1

function test() {  
    var hide=$('.hidden').css('display');
    var class=(hide=='none') ? "inherit" : "none";  
    $(".hidden").css({ display: class });
};

Answer 2

有一个内置的jQuery函数来执行此操作：toggle()

function test(){
    $('.hidden').toggle();
}

Answer 3

http://jsfiddle.net/JsGd4/

<a href="javascript:test()">Test</a>

<div class="hidden">assaas</div>
<script>
    function test() {
        $('.hidden').toggle();
    };
</script>

.hidden {
    display:none;
}

Answer 4

示例：DIV MENU with CLASS＆amp; ID

$('#panel').click( function() { 
	if ($("div.menu").css("display") == "none") { 
		$("div.menu").css("display","inline-table"); 
	} else {
		$("div.menu").css("display","none"); 
	}
});

.menu ul li {
  border: 1px solid black;
  padding: 10px;
  display: inline-table;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<a href="#" id="panel">==SHOW/HIDDEN==</a><br>
<div class="menu">
  <ul>
    <li>TEST 1</li>
    <li>TEST 2</li>
    <li>TEST 3</li>
    <li>TEST 4</li>
  </ul>
</div>

使用jquery单击链接并返回更改css属性。谁能帮助我？

4 个答案: