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

Question

我正在尝试全屏显示div＃controls，当单击其中的按钮时，使所有其他div＃controls具有相同的parent，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（并使'隐藏'仍然略微可见，这样你就可以看到后续点击的效果）

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

    });

.hidden {opacity:0.1}

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

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();
});