好的,所以我在这里使用了各种各样的插件来实现这一目标。我已经与客户核对了此页面几个小时。他说他不希望我使用插件。他引用了jQuery Animate,但是我对编写自己的代码真是个菜鸟,我不确定从哪里开始。我提供了我需要执行的操作的图像,但看起来很不错,但是我需要一些帮助来找到解决方案。感谢您的所有帮助和时间!)
我需要补充说明的是,该描述将始终在领导者缩略图下方直接展开。我也希望它对移动用户也毫无影响。如果可能的话?
<div class="container leaderShipwrapper gallery-items">
<ul id="items" class="row list-unstyled">
<div class="col-sm-12 col-sm-offset-1 leaderShipgrid">
<li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><a href="#"><img class="image-responsive" src="images/leader.jpg" alt="" /></a></li>
<li class="col-sm-2 col-xs-4 leader" data-name="ray" data-title="dunce" data-profile="dunce profile"><a href="#"><img class="image-responsive" src="images/leader.jpg" alt="" /></a></li>
<li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><a href="#"><img class="image-responsive" src="images/leader.jpg" alt="" /></a></li>
<li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><a href="#"><img class="image-responsive" src="images/leader.jpg" alt="" /></a></li>
<li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><a href="#"><img class="image-responsive" src="images/leader.jpg" alt="" /></a></li>
</div>
<div class="col-sm-10 col-sm-offset-1">
<li id="1" class="leaderDescription"><div class="leaderName">NAME</div><div class="leaderTitle">TITLE</div><div class="leaderProfile">Description for row 1 cell 1</div></li>
</div>
</ul>
</div>
<script>
$('.leader').click(function(){
$(this).parent().siblings().find('.leaderDescription').find('.leaderName').text($(this).attr('data-name'));
$(this).parent().siblings().find('.leaderDescription').find('.leaderTitle').text($(this).attr('data-title'));
$(this).parent().siblings().find('.leaderDescription').find('.leaderProfile').text($(this).attr('data-profile'));
$(this).parent().siblings().find('.leaderDescription').slideDown();
});
</script>
好的,所以我现在很想问这个问题。我需要知道我该怎么做才能使它更接近上面的图像。我有第一行,并且要正确加载数据,如果已经打开,则无法向上滑动,然后向下滑动单击的新滑动。我还需要它来打开领导者照片下面的信息,就像我添加的照片一样。请让我知道我离这有多远?
最佳答案
我可能会这样处理,以使容器在点击时展开而不是悬停,以便为移动设备设置一致的行为。
为所有可扩展容器提供相同的类名(例如:employeeDetails
)。
也为所有照片图块指定一个类名(例如:employeeThumb
)。然后为您的照片拼贴设置点击事件:
$(".employeeThumb"_.on("click touchstart", function() {
$(".employeeThumb").slideUp(105); //closes any open expanded items
$(this).find('.hover-dropdown').first().stop(true, true).slideDown(150);
}
您可以修改上面的内容,以便它检测当前是否已打开,然后将其关闭。
关于javascript - 缩略图网格可扩展数据属性,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30268033/