文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何显示选中的div和隐藏其他兄弟div？

问如何显示选中的div和隐藏其他兄弟div？
EN

Stack Overflow用户
提问于 2020-04-18 22:34:01
回答 2查看 40关注 0票数 1

我希望所有未选中的div都会消失，并且只显示选中的卡。我有不同的卡，ids是动态的(default++)，使用循环，我还添加了影响，当使用select div时，它选择红色边框而不是div。

我尝试了不同的方法，当我点击选中的div时，选中的div将保持不变，其余的div将消失。

​

代码语言：javascript
复制
//Showing border on the selected card 
$('.selects').click(function() {
  if ($('.selects.choice').length > 0) {
    $('.choice').removeClass('choice');
    $(this).addClass('choice');

  } else {
    $(this).addClass('choice');

  
  }
});
代码语言：javascript
复制
.card{
    margin:5px;
    width:140px;
    display: flex !important;
    justify-content: center;
    align-items:center;
    
}

#operatorImage >img {
        width:100px;
        height:50px;
    }
    
.choice {
    border: 3px #CA0B00 solid;
    text-decoration: none;
}

.operator-card{
    
    cursor:pointer;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <div id="default-0" class="operator-card col-md-4">
                <div class="col-xl-12 col-md-12  mb-4 " >
                  <div class="card border-left-danger shadow h-100 py-2 selects">
                    <div class="card-body">
                      <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                          <div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Afghanistan</div>
                          <div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Etisalat</div>
                        </div>
                        <div class="col-auto" id="operatorImage">
                            <img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
      
</div>

 <div id="default-2" class="operator-card col-md-4">
                <div class="col-xl-12 col-md-12  mb-4 " >
                  <div class="card border-left-danger shadow h-100 py-2 selects">
                    <div class="card-body">
                      <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                          <div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Pakistan</div>
                          <div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Telenor</div>
                        </div>
                        <div class="col-auto" id="operatorImage">
                            <img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


<div id="default-3" class="operator-card col-md-4">
                <div class="col-xl-12 col-md-12  mb-4 " >
                  <div class="card border-left-danger shadow h-100 py-2 selects">
                    <div class="card-body">
                      <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                          <div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Nigira</div>
                          <div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">MTN</div>
                        </div>
                        <div class="col-auto" id="operatorImage">
                            <img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

</div>

<div id="default-2" class="operator-card col-md-4">
                <div class="col-xl-12 col-md-12  mb-4 " >
                  <div class="card border-left-danger shadow h-100 py-2 selects">
                    <div class="card-body">
                      <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                          <div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Afghanistan</div>
                          <div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Etisalat</div>
                        </div>
                        <div class="col-auto" id="operatorImage">
                            <img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
</div>

​

jquery
html
css
javascript
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-04-18 22:52:23

您可以在同级之间切换，如下所示：

​

代码语言：javascript
复制
$('.card-body').click(function() {
  $('.card-body').not(this).hide();
});
代码语言：javascript
复制
.card {
  margin: 5px;
  width: 140px;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

#operatorImage>img {
  width: 100px;
  height: 50px;
}

.choice {
  border: 3px #CA0B00 solid;
  text-decoration: none;
}

.operator-card {
  cursor: pointer;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="default-0" class="operator-card col-md-4">
  <div class="col-xl-12 col-md-12  mb-4 ">
    <div class="card border-left-danger shadow h-100 py-2 selects">
      <div class="card-body">
        <div class="row no-gutters align-items-center">
          <div class="col mr-2">
            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Afghanistan</div>
            <div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Etisalat</div>
          </div>
          <div class="col-auto" id="operatorImage">
            <img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E" />
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<div id="default-2" class="operator-card col-md-4">
  <div class="col-xl-12 col-md-12  mb-4 ">
    <div class="card border-left-danger shadow h-100 py-2 selects">
      <div class="card-body">
        <div class="row no-gutters align-items-center">
          <div class="col mr-2">
            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Pakistan</div>
            <div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Telenor</div>
          </div>
          <div class="col-auto" id="operatorImage">
            <img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E" />
          </div>
        </div>
      </div>
    </div>

​

票数 1
EN

Stack Overflow用户

发布于 2020-04-18 22:44:32

像这样的东西？

代码语言：javascript
复制
var $selects = $('.selects');

$selects.click(function() {
  $selects.not(this).removeClass('choice').hide();
  $(this).addClass('choice');
});

刚刚测试过了，而且还能用。但是你必须在css中删除这个重要的东西：

代码语言：javascript
复制
display: flex !important;
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/61290859

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档