Question

我想点击其中的按钮时全屏显示 div＃controls ，并使所有其他 div＃controls 使用相同的父级， div＃按钮，消失。

我的HTML：

           <div id="testpile" class="inner cover">
                <div id="buttons" class="buttons">
                    <div id="controls" class="col-md-4 rat">
                        <h1>Rationelt</h1>
                        <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
                        <a id="1" class="btn btn-group btn-default" role="button">Rationelt</a>
                    </div>
                    <div id="controls" class="col-md-4 emo">
                        <h1>Emotionelt</h1>
                        <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
                        <a id="2" class="btn btn-group btn-default" role="button">Emotionelt</a>
                    </div>
                    <div id="controls" class="col-md-4 per">
                        <h1>Personligt</h1>
                        <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
                        <a id="3" class="btn btn-group btn-default" role="button">Personligt</a>
                    </div>
                </div>
            </div>

我的jQuery：

<script type="text/javascript">
    $('.btn-group').on('click', function() {
        $(this).parent().toggleClass('col-md-4 col-md-12');
        $(this).parent().siblings().toggleClass('col-md-4 col-md-0');
    });
</script>

我很确定我遇到的问题是我没有成功瞄准正确的div，但我已经尝试了一切来解决这个问题，而且遗憾的是，天堂已经无法解决。

Answer 1

除了控制ID被复制之外，只需切换父母兄弟姐妹的显示以在每个按钮点击时显示/隐藏它们：

 $('.btn-group').on('click', function() {
   $(this).parent().siblings().toggle();
 });

Answer 2

尽管ID重复无效，但您的目标是正确的div。 toggleClass的使用是个问题，尤其是在第一次点击之后，因为它会将每个类从当前状态切换，这会产生不一致的结果，具体取决于用户点击每个项目的顺序 - 您也会看到切换网格列声明，我不确定你的意图是什么？

以下我已将您的代码更改为明确使用addClass和removeClass（并且已隐藏＆＃39;仍然略微可见，以便您可以看到后续点击的效果）

＆＃13;

$('.btn-group').on('click', function() {
        $(this).parent().removeClass('hidden');
        $(this).parent().siblings().addClass('hidden');

    });

＆＃13;

.hidden {opacity:0.1}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testpile" class="inner cover">
                <div id="buttons" class="buttons">
                    <div id="controls" class="col-md-4 rat">
                        <h1>Rationelt</h1>
                        <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
                        <a id="1" class="btn btn-group btn-default" role="button">Rationelt</a>
                    </div>
                    <div id="controls" class="col-md-4 emo">
                        <h1>Emotionelt</h1>
                        <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
                        <a id="2" class="btn btn-group btn-default" role="button">Emotionelt</a>
                    </div>
                    <div id="controls" class="col-md-4 per">
                        <h1>Personligt</h1>
                        <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
                        <a id="3" class="btn btn-group btn-default" role="button">Personligt</a>
                    </div>
                </div>
            </div>

＆＃13;

Answer 3

我不认为你对父母的兄弟姐妹做任何事情，只是给他们一个列类。根据我的理解，您需要添加的是.hide()方法。这将隐藏您想要隐藏的div。

以下是来自jquery api的链接，它可以帮助您并提供示例link

Answer 4

删除该ID controls。 ID不应重复，请在那里使用类;

<div class="controls col-md-4 rat">

并使用JS之类的;

$('.btn-group').on('click', function() {
    $(".controls").hide();
    $(this).parents(".controls").show();
});

除了点击元素之外，父级的兄弟姐妹在jQuery

4 个答案: