使元素在溢出中可见div

Question

我有一个div，即overflow:hidden，在页面加载时，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中，以便我们可以定位整个项目。否则，如果我们只隐藏里面的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/