HTML

Question

我有一个overflow:hidden的div，在页面加载时，该div也是display:none。它仅在按下按钮（#showList）时显示。在页面加载时，其中一个div.listelement也会有类.selected。我需要做的是，每次点击button#showList时，用户都应该看到.listelement.selected元素。我现有的代码如下：

HTML

<button id="showList">Select Family</button>
<div class="familylist">
  <ul class="list">
    <li>
      <div data-id="###" class="button listelement">
        <h2 class="name">My Name</h2>
        <p class="address">My Address</p>
      </div>
    </li>
    <li>
      <div data-id="###" class="button listelement">
        <h2 class="name">My Name</h2>
        <p class="address">My Address</p>
      </div>
    </li>
    <li>
      <div data-id="###" class="button listelement selected">
        <h2 class="name">My Name</h2>
        <p class="address">My Address</p>
      </div>
    </li>
    <li>
      <div data-id="###" class="button listelement">
        <h2 class="name">My Name</h2>
        <p class="address">My Address</p>
      </div>
    </li> ... 
  </ul>
</div>

CSS

.familylist {
    border: 2px solid gray;
    overflow: scroll;
    height: 214px;
    display:none
}

（相关）JS

$(document).ready(function(){
  $(".familylist .listelement[data-id=123]").addClass("selected").css("background-color","aliceblue");
});

这是显示问题的jsfiddle。第一次单击该按钮时，不显示蓝色元素。您只能在向下滚动时看到它。当我点击它时，我希望它显示在div的可见区域。

Answer 1

只需在代码中添加滚动操作：

$(document).ready(function(){
    $("li[data-id='123']").addClass("selected");

    $("button").click(function(){

        $(".familylist").toggle();
        $(".familylist").scrollTop(210);

    });

});

这里的小提琴：http://jsfiddle.net/Ly8bh08s/2/

Answer 2

jsFiddle

 $(document).ready(function () {
    $(".familylist .listelement[data-id=123]").addClass("selected").css("background-color", "aliceblue");
    $('#showList').click(function () {
        $('.familylist').show().find('.listelement:not(.selected)').parent().hide();
    });
});

Answer 3

假设我理解你的预期行为，请按照我的方式进行处理。

首先，您希望将数据属性和类移到li中，以便我们可以定位整个项目。否则，如果我们只隐藏li里面的div，你会看到一个空的列表项（包括点）。

HTML：

<button id="showList">Select Family</button>
<div class="familylist">
  <ul class="list">
    <li data-id="###" class="button listelement">
      <div >
        <h2 class="name">My Name</h2>
        <p class="address">My Address</p>
      </div>
    </li>
    <li data-id="###" class="button listelement">
      <div >
        <h2 class="name">My Name</h2>
        <p class="address">My Address</p>
      </div>
    </li>
    <li data-id="###" class="button listelement selected">
      <div >
        <h2 class="name">My Name (Selected)</h2>
        <p class="address">My Address</p>
      </div>
    </li>
    <li data-id="###" class="button listelement">
      <div >
        <h2 class="name">My Name</h2>
        <p class="address">My Address</p>
      </div>
    </li> ... 
  </ul>
</div>

然后，如果您想要显示一个孩子，那么您的CSS不应该隐藏整个家庭列表。如果隐藏父级，则始终隐藏子级。只需隐藏列表项：

.familylist {
    border: 2px solid gray;
    overflow: scroll;
    height: 214px;
}
.familylist .listelement {
    display: none;
}

最后，jQuery在点击时显示所选元素：

$(".familylist .listelement[data-id=123]").addClass("selected").css("background-color","aliceblue");
$("#showList").on("click",function(){
    $(".listelement.selected").show();
});

这是一个小提琴：http://jsfiddle.net/khbpe7eg/1/

使元素在溢出div中可见

HTML

CSS

（相关）JS

3 个答案: