Question

我有一个父母div＆＃34;总计＆＃34;其中，有两个孩子div，＆＃34; some＆＃34;和＆＃34;框＆＃34;。当我点击div中的链接时，有些＆＃34; （child-1），＆＃34; box＆＃34;（child-2）必须以宽度：100％显示;如果我点击其他父链接，当前的＆＃34;框＆＃34; （孩子-2）必须隐藏。此外，单击单击按钮时，不得隐藏段落标记（如位置：相对）。

Here是解决这个问题的小提琴。

以下几行是我试过的代码。

 $('.box').hide();
$(".click-btn").on('click', function() {
    $('.box').hide();
   $(this).parent().parent().children(".box").toggle(1000);
});

Answer 1

检查这是否可以解决您的问题jsfiddle

我添加了这个

$('.box').hide();
$(".click-btn").on('click', function() {
    $('.box').hide();
   $(this).parent().parent().children(".box").toggle(1000);
});

添加css

.box {
  width: 100%;
  float: left;
  position: absolute;
  height: 200px;
  background: orange;
  top: 70px;
  left: 0px;
  clear: both;
}

Answer 2

我的解决方案是将每个.box置于浮动.single之外，并使用数据属性引用它们。

<div class="total">
    <div class="single">
        <div class="some"><a class="click-btn" href="#" data-box="box1">click</a></div>
    </div>

    <div class="clearfix"></div>

    <div class="box" data-id="box1">Box 1</div>
</div>

和盒子css

.box {
  width: 100%;
  height: 200px;
  background: orange;
  display:none;
}

如果您在css中设置display none，则不必在dom ready上使用$('.box').hide();。

由于您在点击时隐藏了所有.box元素，因此切换功能将无效。如果再次单击活动链接，要切换该框，可以使用jQuery的.not()函数，该函数将取出集合的元素。

总而言之，JS看起来像是：

$(".click-btn").on('click', function(e) {
    e.preventDefault();
    var boxId = $(this).data('box');
    var activeBox = $('[data-id="'+boxId+'"]');
    $('.box').not(activeBox).hide();
    activeBox.toggle(1000);
});

我正在使用e.preventDefault();阻止默认浏览器操作点击链接的内容。

这是一个小提琴：http://jsfiddle.net/mrvtwpjp/40/

如何将位置绝对div显示为位置相对div？

2 个答案: