Question

我有6个div。如果单击第一个div，则应该增加该div的宽度。现在，如果我单击第二个div，则应减小第一个div的宽度并增加第二个div的宽度，反之亦然。但是我的代码不起作用：

$(document).ready(function() {

  $(".glyphicon-eye-open").click(function() {
    if ($("div").is('.main, .main22')) {
      $(this).closest('div').removeClass('main');
      $('.item').not(this).removeClass('main22');
      $('.item').not(this).removeClass('main');
    } else {
      $(this).closest('div').toggleClass('main');
      $(this).closest('div').addClass('main22');
    }
  });

});

CSS代码：

<div class="container">
  <div class="main-container">
    <div class="item">A <i class="glyphicon glyphicon-eye-open"></i></div>
    <div class="item">B <i class="glyphicon glyphicon-eye-open"></i></div>
    <div class="item">C <i class="glyphicon glyphicon-eye-open"></i></div>
    <div class="item">D <i class="glyphicon glyphicon-eye-open"></i></div>
    <div class="item">E <i class="glyphicon glyphicon-eye-open"></i></div>
    <div class="item">F <i class="glyphicon glyphicon-eye-open"></i></div>
  </div>

Answer 1

您可以尝试以下代码。不要添加诸如main和main22之类的额外类。

HTML代码：

<div class="container">
      <div class="main-container">
        <div class="item">A <i class="glyphicon glyphicon-eye-open"></i></div>
        <div class="item">B <i class="glyphicon glyphicon-eye-open"></i></div>
        <div class="item">C <i class="glyphicon glyphicon-eye-open"></i></div>
        <div class="item">D <i class="glyphicon glyphicon-eye-open"></i></div>
        <div class="item">E <i class="glyphicon glyphicon-eye-open"></i></div>
        <div class="item">F <i class="glyphicon glyphicon-eye-open"></i></div>
      </div>

修改后的JS代码：

<script>

    $('.item').on('click', function() {
        if ($(this).hasClass('highlight')) {
            $(this).removeClass('highlight');
            $(this).removeClass('main');
        } else {
            $('.item.highlight').removeClass('highlight');
            $(this).addClass('highlight');
            $(this).toggleClass('main');
            $('.item').not(this).removeClass('main');
        }
    });
    </script>

在代码中添加了一些CSS：

body{margin: 0; padding: 0;}
.item{border:1px solid #ccc; min-height: 200px; width:48%; float: left; position: relative; margin:1%;}
.main-container{margin-top:20px;}
.item .glyphicon-eye-open{position: absolute; right: -10px; top:-10px; font-size: 20px; cursor: pointer;}
.main{width:98%;}


.highlight {background: orange; border:2px solid red;}
#open, #close {display: none;}

Answer 2

使用parent和css方法更改高度

$(document).ready(function(){

      $(".glyphicon-eye-open").click(function(){
      $('div').css('height','20px')
        $(this).parent().css('height','50px')
      });

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
      <div class="main-container">
        <div class="item">A <i class="glyphicon glyphicon-eye-open">g</i></div>
        <div class="item">B <i class="glyphicon glyphicon-eye-open">g</i></div>
        <div class="item">C <i class="glyphicon glyphicon-eye-open">g</i></div>
        <div class="item">D <i class="glyphicon glyphicon-eye-open">g</i></div>
        <div class="item">E <i class="glyphicon glyphicon-eye-open">g</i></div>
        <div class="item">F <i class="glyphicon glyphicon-eye-open">g</i></div>
      </div>

Answer 3

不确定我是否正确理解了您的问题。

这是您要找的吗？

您单击的元素的宽度将增加，而其余元素将恢复正常。

$(function(){
$(".div").on("click",function(){
$(this).css("max-width","200px");
$(".div").not($(this)).css("max-width","100px");
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div" style="max-width:100px;border:1px solid red">Div 1</div><br>
<div class="div" style="max-width:100px;border:1px solid red">Div 2</div><br>
<div class="div" style="max-width:100px;border:1px solid red">Div 3</div><br>
<div class="div" style="max-width:100px;border:1px solid red">Div 4</div><br>
<div class="div" style="max-width:100px;border:1px solid red">Div 5</div><br>

如果单击，如何接连展开和折叠div

3 个答案: