Question

当用户决定隐藏（或显示）特定内容时，我正在尝试调整div的大小。例如，我有一个内容页面（https://jsfiddle.net/4b1g5jp9/1/），当用户点击hide时，我希望div相应地调整大小，隐藏除实际内容标题之外的所有内容。

此外，＆＃39; Show＆＃39;链接应仅显示内容是否实际隐藏，反之亦然。

我试图根据我在网上找到的类似问题调整一些JS并尝试以下方法：

<script language="javascript">
            function toggle() {
                var ele = document.getElementById("contents-list");
                if (ele.style.display == "block") {
                    ele.style.display = "none";
                } else {
                    ele.style.display = "block";
                }
            }
        </script>

但是上面没有任何结果。任何建议/解决方案将不胜感激。

Answer 1

将该结构用作HTML：

<div id="contents-list">
    <ul>
        <li id="centerContents"><b> Contents </b> 
            <a class="hideLinks" href="#">[Hide]</a>
            <a class="showLinks" href="#">[Show]</a>
        </li>
    </ul>
    <ul class="submenu">
        <li> <a href="#jumpQ1"> 1.  What is Mobility? </a> </li>
        <li> <a href="#jumpQ2"> 2.  Why Mobility is important </a> </li>
        <li> <a href="#jumpQ3"> 3.  Other </a> </li>
    </ul>
</div>

使用jQuery：

<script type="text/javascript">
    $("#contents-list ul li a.hideLinks").click(function(){
        $("ul.submenu").css("display", "none");
    });

    $("#contents-list ul li a.showLinks").click(function(){
        $("ul.submenu").css("display", "block");
    });
</script>

您的jQuery脚本应该在HTML之后或</body>标记附近。并确保在head标记内调用jQuery cdn：<script src="jquery-3.0.0.min.js" type="text/javascript"></script>。

注意：您可以使用Show()和Hide()功能代替css显示属性。您可以阅读有关这些函数的更多信息Here。

Answer 2

通过使用事件的目标，我们可以确定要显示/隐藏的内容。如果我们这样做，我们可以在一个页面上多次使用它，而不会相互混淆。

另外，我已经使用了toggle（），它基本上是你代码语句中的if（）。

https://jsfiddle.net/jkrielaars/qhb8ccob/1/

$(document).ready(function() {
	$('.toggle').click( function(event) {
  	$(event.target).parents('.contents-list').find('ul').toggle();
  	var newText = $(event.target).text() === '[Hide]' ? '[Show]' : '[Hide]';
    $(event.target).text(newText);
  });
});

.contents-list{
    width: 300px;
   
    background-color: #f4f6f9;
    padding: 15px;
    border: 1px solid #b3b4b5;
}

.contents-list ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

#contents-list ul li{
    text-decoration: none;
}

.contents-list ul li a{
    padding-bottom: 2px;
    text-decoration: none;
}

.contents-list a:visited { 
    text-decoration: none; color:blue; 
}
.contents-list ul li a:hover{
    text-decoration: underline;
}

.centerContents{
    text-align: center;
}

.toggle{
    font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents-list">
  <div class="centerContents"><b> Contents </b> 
    <a class="toggle" href="#hideContents">[Hide]</a>
  </div>
  <br/>
  <ul>
    <li> <a href="#jumpQ1"> 1.  What is Mobility? </a> </li>
    <li> <a href="#jumpQ2"> 2.  Why Mobility is important </a> </li>
    <li> <a href="#jumpQ3"> 3.  Other </a> </li>
  </ul>
</div>

<div class="contents-list">
  <div class="centerContents"><b> Contents </b> 
    <a class="toggle" href="#hideContents">[Hide]</a>
  </div>
  <br/>
  <ul>
    <li> <a href="#jumpQ1"> 1.  What is Mobility? </a> </li>
    <li> <a href="#jumpQ2"> 2.  Why Mobility is important </a> </li>
    <li> <a href="#jumpQ3"> 3.  Other </a> </li>
  </ul>
</div>

动态调整div大小时隐藏（和显示）链接

2 个答案: