点击显示指定元素隐藏其他同辈元素的方法

在Web开发中，如果你想通过点击一个元素来显示该元素并隐藏其同辈（sibling）元素，这通常涉及到JavaScript的使用。下面是一个简单的实现方法，使用了jQuery库来简化DOM操作（因为jQuery提供了便捷的`.siblings()`方法来选择同辈元素）。如果你不使用jQuery，也可以用原生JavaScript实现，但代码会稍长一些。

### 使用jQuery

首先，确保你的页面已经引入了jQuery库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

然后，你可以这样编写JavaScript代码：

// 假设所有可点击的元素都有一个共同的类名，比如 '.clickable'
$('.clickable').click(function() {
    // 隐藏当前元素的所有同辈元素
    $(this).siblings().hide();
    // 显示当前元素（如果它之前是隐藏的）
    $(this).show();
    // 注意：如果当前元素默认就是可见的，show() 方法在这里不会改变它的状态
});

但是，如果你的意图是切换当前元素的显示状态（如果它是隐藏的则显示，如果它是显示的则隐藏），并且同时隐藏所有同辈元素，你可能需要稍微调整代码：

$('.clickable').click(function() {
    // 隐藏所有同辈元素
    $(this).siblings().hide();
    // 切换当前元素的显示状态
    $(this).toggle();
});

### 使用原生JavaScript

如果你不想使用jQuery，可以使用原生JavaScript来实现类似的功能：

document.querySelectorAll('.clickable').forEach(function(element) {
    element.addEventListener('click', function() {
        // 获取当前元素的父元素
        var parent = this.parentNode;
        // 遍历父元素的所有子元素
        Array.from(parent.children).forEach(function(child) {
            // 如果子元素不是当前点击的元素，则隐藏它
            if (child !== this) {
                child.style.display = 'none';
            }
        }, this);
        // 切换当前元素的显示状态
        this.style.display = this.style.display === 'none' ? 'block' : 'none';
    });
});

注意：在使用原生JavaScript时，你需要自己处理显示状态的切换，因为`style.display`只能设置为具体的值（如`'block'`、`'none'`等），而不像jQuery的`.toggle()`方法那样自动切换。此外，由于`querySelectorAll`返回的是一个静态的`NodeList`对象，我们需要使用`Array.from()`将其转换为数组，以便使用`forEach`方法。