Question

我试图隐藏/显示DIV使用Jquery。我希望在单击标题时显示div，如果再次单击则切换消失（切换）或者如果选择了其他选项则消失。

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

<script>
$(document).ready(function (){
$("a1").click(function(){
    $('#analytical').toggle();
});
});

$(document).ready(function (){
$("a2").click(function(){
    $('#test1').toggle();
});
});

</script>


<div id="personalinfo">
<a1><a class="first">A</a><a>nalytical Skills<a/></a1><br/>
<a2><a class="first">T</a><a>est1<a></a2><br/>
</div>


<div id="analytical">
hello
    </div>

<div id="test1">
    Organisational
    </div>

第一个DIV（组织）会切换，但是当点击相关选项时，以下（test1）div没有！

任何有助于获得此分类的帮助都会很棒。

感谢。

Answer 1

你的结束标签搞砸了

<div id="personalinfo">
    <a1><a class="first">A</a><a>nalytical Skills</a></a1><br/>
    <a2><a class="first">T</a><a>est1</a></a2><br/>
</div>

演示：Fiddle

Answer 2

我会更改html标记，使其有效：

<div id="personalinfo">
    <a href="#analytical"><span class="first">A</span>nalytical Skills</a><br/>
    <a href="#test1"><span class="first">T</span>est1</a><br/>
</div>


<div id="analytical">
    hello
</div>

<div id="test1">
    Organisational
</div>

然后：

$(document).ready(function (){
    $("#personalinfo a[href^='#']").on("click", function(e){
        var hash = $(this).attr("href");
        var el = $(hash);
        e.preventDefault();
        el.toggle();
    });
});

它将使用#hash链接查找#personalinfo中的所有锚元素，并尝试切换具有哈希标记ID的元素。

Answer 3

在代码nalytical Skills<a/>中查看此内容可能会对您有所帮助

使用Jquery显示/隐藏Div

3 个答案: