Question

我正在尝试制作容器，当我点击div1的元素并且div1焦点和div1高度增加时，当div1的元素是非焦点或非焦点时，div1高度返回先前的样式。我在这里制作一个片段，但它不起作用。请有人帮我，我怎么能这样做？我正在使用jquery框架..

＆＃13;

$(document).ready(function() {

  $(".two").focus(function() {

    $(".one").css({
      'height': '400px',
      '-webkit-box-shadow': '2px 2px 5px 2px rgba(0,0,0,0.75)',
      '-moz-box-shadow': '2px 2px 5px 2px rgba(0,0,0,0.75)',
      'box-shadow': '2px 2px 5px 3px rgba(0,0,0,0.75)'
    });

  });

});

＆＃13;

    .one {
      background-color: #f2c133;
      border: 3px solid #ccc;
      width: 200px;
      height: 50px;
    }
    .two {
      width: 80px;
      height: 30px;
      background-color: #a1b2c3;
      color: #000;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div tabindex="0" class="one">
  <div class="two">

    click me

  </div>

</div>

＆＃13;

Answer 1

请注意，不止一次包含jQuery会导致一些令人讨厌的错误。

您可以通过以下代码实现此效果：

var $one = $( '.one' ),
    $two = $( '.two' );

var styleObj = {
    'height'             : '300px',
    '-webkit-box-shadow' : '2px 2px 5px 2px rgba(0,0,0,0.75)',
    'box-shadow'         : '2px 2px 5px 3px rgba(0,0,0,0.75)'
};

var addStyle = function() {
    $one.css( styleObj );
};

var removeStyle = function() {
    $one.removeAttr( 'style' );
};

$two.on({
    'mouseenter' : addStyle,
    'foucsin'    : addStyle,
    'mouseleave' : removeStyle,
    'foucsout'   : removeStyle,
});

JS小提琴演示链接：http://jsfiddle.net/_vijaydev/nh7vb32r/

Answer 2

我希望这有效

<强> HTML

<div class="one">
    <div class="two">click me</div>
</div>

<强> CSS

.one {
    background-color: #f2c133;
    border: 3px solid #ccc;
    width: 200px;
    height: 50px;
}
.two {
    width: 80px;
    height: 30px;
    background-color: #a1b2c3;
    color: #000;
}

<强>的Javascript

$(document).ready(function () {
    $(".two").mouseenter(function () {
        $(".one").animate({
            'height': "300px",
                '-webkit-box-shadow': '2px 2px 5px 2px rgba(0,0,0,0.75)',
                '-moz-box-shadow': '2px 2px 5px 2px rgba(0,0,0,0.75)',
                'box-shadow': '2px 2px 5px 3px rgba(0,0,0,0.75)'
        });
        $(".one").mouseleave(function () {
            $(".one").animate({
                'height': "50px",
                    '-webkit-box-shadow': '2px 2px 5px 2px rgba(0,0,0,0.75)',
                    '-moz-box-shadow': '2px 2px 5px 2px rgba(0,0,0,0.75)',
                    'box-shadow': '2px 2px 5px 3px rgba(0,0,0,0.75)'
            });
        });


    });
});

fiddle here

Answer 3

$(document).ready(function() {

  $(".two").focus(function() {
    $(".one").addClass('isfocus');
  });

  $(".two").focusout(function() {
    $(".one").removeClass('isfocus');
  });

});

.one {
  background-color: #f2c133;
  border: 3px solid #ccc;
  width: 200px;
  height: 50px;
}

.two {
  width: 80px;
  height: 30px;
  background-color: #a1b2c3;
  color: #000;
}

.isfocus {
      height: 300px;
      -webkit-box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.75);
      -moz-box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.75);
      box-shadow: 2px 2px 5px 3px rgba(0,0,0,0.75);
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="script.js"></script>
    
  </head>

  <body>
   <div tabindex="1" class="one">
  <div tabindex="2" class="two">

    click me

  </div>

</div>
  </body>

</html>

Answer 4

＆＃13;

$(document).ready(function() {

  $(".two").focus(function() {
    $(".one").addClass('isfocus');
    
    $(".one").focus(function() {
     $(".one").addClass('isfocus');
    });
  
    
  });
  
  $(".one").focusout(function() {
     $(".one").removeClass('isfocus');
  });
 
   
 $(".root").focus(function() {
   $(".one").removeClass('isfocus');
   $(".one").unbind();
  });
 
});

＆＃13;

.one {
  background-color: #f2c133;
  border: 3px solid #ccc;
  width: 200px;
  height: 50px;
}

.two {
  width: 80px;
  height: 30px;
  background-color: #a1b2c3;
  color: #000;
}

.isfocus {
      height: 300px;
      -webkit-box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.75);
      -moz-box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.75);
      box-shadow: 2px 2px 5px 3px rgba(0,0,0,0.75);
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="script.js"></script>
    
  </head>

  <body><div tabindex="4" class="root">
   <div tabindex="3" class="one">
  <div tabindex="2" class="two">

    click me

  </div>

</div>
    </div>
  </body>

</html>

＆＃13;

用js聚焦和解开div的元素

4 个答案: