缩略图网格可扩展数据属性

时间:2015-05-15 20:17:24

标签: javascript jquery html css twitter-bootstrap

好的,所以我在这里使用了各种各样的插件来解决这个问题。我和我的客户一起检查了这个页面几个小时。他说他不想让我使用插件。他引用了jQuery Animate,但我是一个写自己的代码的菜鸟我不知道从哪里开始。我提供了一个我需要它做什么和看起来像的图像,但我需要一些帮助找到解决方案。感谢您的所有帮助和时间!)

我需要补充的是,描述将始终直接在领导缩略图下展开。我希望它对移动用户来说也是无能为力的。如果可能的话?

enter image description here

    <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>

好的,所以我现在有一个好点,现在就问这个问题。我需要知道我需要做些什么来使它更接近上面的图像。我有第一行,我正在获取数据正确加载我只是不能滑动,如果一个已经打开然后向下滑动被点击的新的。我还需要它来打开领导者照片下方的信息,就像我添加的照片中一样。请让我知道我离此有多远?

1 个答案:

答案 0 :(得分:0)

我可能会这样做,以便容器在点击时展开,而不是悬停,以便为移动设备提供一致的行为。

为所有可扩展容器指定相同的类名(例如: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);
}

您可以修改上述内容,以便检测当前是否已打开,然后将其关闭。