Question

我遇到了切换某些div的问题，但仅限于Safari（版本7.0.4）。 Chrome和Firefox似乎正在完全按照我的需要行事，我无法确定问题所在。

基本上，当点击“了解更多”时，隐藏的div应该展开。如果单击更多那个，则所述div应该整齐地堆叠（在它们各自的行中）。

在Safari中，只有每行的第一个div似乎想要合作。

我是jQuery的新手，所以任何帮助都会非常感激！

演示网站位于：http://melissa-athina.com/tovifit/provider-store.html

谢谢！

HTML

<div class="expand-link-menu">
    <img src="images/store/live-well/program-1.jpg"><br>

    <h4>Program Title 1</h4>

    <p>Aliquam suscipit tristique sapien, id porta justo accumsan
    bibendum.</p><a class="expand-link" data-index="0">Learn More [+]</a>
    <img src="images/store/live-well/program-2.jpg"><br>

    <h4>Program Title 1</h4>

    <p>Aliquam suscipit tristique sapien, id porta justo accumsan
    bibendum.</p><a class="expand-link" data-index="1">Learn More [+]</a>
    <img src="images/store/live-well/program-3.jpg"><br>

    <h4>Program Title 1</h4>

    <p>Aliquam suscipit tristique sapien, id porta justo accumsan
    bibendum.</p><a class="expand-link" data-index="2">Learn More [+]</a>
</div>

<div class="collapsed-div-container">
    <div class="test collapsed-div">
        1
    </div>

    <div class="collapsed-div">
        2
    </div>

    <div class="collapsed-div">
        3
    </div>
</div>

<div class="expand-link-menu">
    <img src="images/store/live-well/program-4.jpg"><br>

    <h4>Program Title 1</h4>

    <p>Aliquam suscipit tristique sapien, id porta justo accumsan
    bibendum.</p><a class="expand-link" data-index="0">Learn More [+]</a>
    <img src="images/store/live-well/program-5.jpg"><br>

    <h4>Program Title 1</h4>

    <p>Aliquam suscipit tristique sapien, id porta justo accumsan
    bibendum.</p><a class="expand-link" data-index="1">Learn More [+]</a>
    <img src="images/store/live-well/program-6.jpg"><br>

    <h4>Program Title 1</h4>

    <p>Aliquam suscipit tristique sapien, id porta justo accumsan
    bibendum.</p><a class="expand-link" data-index="2">Learn More [+]</a>
</div>

<div class="collapsed-div-container">
    <div class="collapsed-div">
        4
    </div>

    <div class="collapsed-div">
        5
    </div>

    <div class="collapsed-div">
        6
    </div>
</div>

CSS

.expand-link-menu {
margin:20px auto;
padding:0;
height:auto;
-moz-column-count:3;
-moz-column-gap:15px;
-webkit-column-count:3;
-webkit-column-gap:15px;
column-count:3;
column-gap:15px
}

.expand-link-menu img {
width:235px;
}

.collapsed-div {
height:300px;
width:100%;
border:1px solid #C5C5C5;
}

SCRIPT

   $(document).ready(function(){
   $(".collapsed-div").hide();
   $(".expand-link").click(function(){
   var expandLink = $(this);
   var expandLinkMenu = $(this).parent()
   var dataIndex = $(this).attr("data-index");
   $(expandLinkMenu).next(".collapsed-div-container").find(".collapsed-div").eq(dataIndex).toggle(function() {
   if ($(this).is(':visible')) {
   expandLink.html(expandLink.html().replace("+", "-"));
  } else {
   expandLink.html(expandLink.html().replace("-", "+"));
   }
   });
 });
});

在Safari中切换问题

0 个答案: