Question

点击div .TQA-SF006-U-160mm-parent时，我希望始终显示.div-TQA-SF006-U-160，并在执行mouseout功能后隐藏 .div-TQA-SF006-U-static。

任何帮助都将不胜感激。

Answer 1

一种简单的方法是添加一个全局变量来检查div条件是否为clicked。然后，当未单击该div时，执行mouseover和mouseout事件

  var clicked = false;
    $(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
    if (clicked == false){
      $(".div-TQA-SF006-U-static").hide();
      $(".div-TQA-SF006-U-160").show();
    }
  }); 
  $(".TQA-SF006-U-160mm-parent").on('mouseout', function(){
    if (clicked == false){
      $(".div-TQA-SF006-U-static").show();
      $(".div-TQA-SF006-U-160").hide();
    }
  });
  $(".TQA-SF006-U-160mm-parent").click(function(){
    if (clicked == false){
      $(".div-TQA-SF006-U-static").hide();
      $(".div-TQA-SF006-U-160").show();
      clicked = true;
    }
    else{
      $(".div-TQA-SF006-U-static").show();
      $(".div-TQA-SF006-U-160").hide();
      clicked = false;
    }
  });

演示：https://jsfiddle.net/xpk82w65/4/

此外，您可以将绑定附加到相同的元素，而无需重新调用这些元素。例如：

  $(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
  })
  .on('mouseout', function(){
  })
  .on('click', function(){
  });

演示：https://jsfiddle.net/xpk82w65/6/

Answer 2

您可以添加一个类来跟踪您正在悬停/单击的元素的状态，并且只有在未单击状态时才使用鼠标悬停/鼠标移动代码。

$(document).ready(function() {
  var $parent = $(".TQA-SF006-U-160mm-parent"),
    $static = $(".div-TQA-SF006-U-static"),
    $160 = $(".div-TQA-SF006-U-160");

  $parent.on('mouseover', function() {
    if (!$(this).hasClass('clicked')) {
      $static.addClass('hide');
      $160.addClass('show');
    }
  }).on('mouseout', function() {
    if (!$(this).hasClass('clicked')) {
      $static.removeClass('hide');
      $160.removeClass('show');
    }
  }).on('click', function() {
    $(this).addClass('clicked');
    $static.addClass('hide');
    $160.addClass('show');
  });

});

.div-TQA-SF006 .td-suspension-child-row2:hover {
  text-decoration: underline;
}

.table-suspension-list {
  border: 0;
}

.table-suspension-list .partNumber {
  border: 1px solid #1F497D;
  border-bottom: 1px solid white;
  background-color: #1F497D;
  color: white;
  font-family: erasFamily;
  font-size: 16px;
  font-weight: bold;
  line-height: 5px;
  padding: 0;
  vertical-align: middle;
}

.table-suspension-list .partNumber-bottom {
  border: 1px solid #1F497D;
  background-color: #1F497D;
  color: white;
  font-family: erasFamily;
  font-size: 16px;
  font-weight: bold;
  padding: 0;
  vertical-align: middle;
}

.table-suspension-list .partNumber div {
  color: white;
}

.table-suspension-list .partNumber-bottom div {
  color: white;
}

.table-suspension-list .partDescription {
  border: 1px solid #1F497D;
  color: #1F497D;
  font-family: erasFamily;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 5px;
  padding: 0;
  text-transform: uppercase;
  vertical-align: middle;
}

.table-suspension-list .partDescription div {
  color: #1F497D;
}

.table-suspension tbody {
  text-align: center;
  vertical-align: middle;
  color: #002060;
}

.table-suspension th {
  background-color: white;
  border: 0;
  border-top: 2px solid #002060;
  padding: 10px 0 10px 0;
  vertical-align: middle;
  font-family: erasFamily;
  font-size: 26px;
  color: #002060;
  text-transform: uppercase;
}

.td-suspension-parent {
  background-color: #deeaf6;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}

.td-suspension-child {
  background-color: white;
  text-align: center;
  vertical-align: middle;
}

.td-suspension-child-row2 {
  background-color: white;
  text-align: center;
  vertical-align: middle;
}

.td-suspension-child div {
  font-size: 30px;
  font-weight: bold;
  padding: 5px;
}

.td-suspension-child-row2 div {
  font-size: 30px;
  font-weight: bold;
  padding: 5px;
}

.div-TQA-SF006-U-160 {
  display: none;
}

.hide {
  display: none;
}

.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-TQA-SF006">
  <table class="table-suspension">
    <tbody>
      <th colspan="6">
        SPECIFICATIONS
      </th>
      <tr>
        <td class="td-suspension-parent" colspan="3" style="width: 50%">Part Number</td>
        <td class="td-suspension-parent" colspan="3" style="width: 50%">Description</td>
      </tr>
      <tr>
        <td class="td-suspension-child" colspan="3">TQA-SF006</td>
        <td class="td-suspension-child" colspan="3">Underslung Air Suspension for 10 Ton Axle</td>
      </tr>
      <tr>
        <td class="td-suspension-parent" colspan="6">Available Ride Height</td>
      </tr>
      <tr>
        <td class="td-suspension-child-row2" style="width:20%">
          <div class="TQA-SF006-U-160mm-parent">160mm</div>
        </td>
        <td class="td-suspension-child-row2" style="width:20%">
          <div class="TQA-SF006-U-200mm-parent">200mm</div>
        </td>
        <td class="td-suspension-child-row2" style="width:20%">
          <div class="TQA-SF006-U-250mm-parent">250mm</div>
        </td>
        <td class="td-suspension-child-row2" style="width:20%">
          <div class="TQA-SF006-U-275mm-parent">275mm</div>
        </td>
        <td class="td-suspension-child-row2" style="width:20%">
          <div class="TQA-SF006-U-300mm-parent">300mm</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

&nbsp;

<div class="div-TQA-SF006-U-static">
  <table class="table-suspension">
    <tbody>
      <th>
        Spare Parts
      </th>
      <tr>
        <td class="td-suspension-parent">Hover mouse over desired Ride Height for pop-up information</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="div-TQA-SF006-U-160">
  <table class="table-suspension">
    <tbody>
      <th colspan="6">
        SPARE PARTS
      </th>
      <tr>
        <td class="td-suspension-parent">TQA-SPA07</td>
        <td class="td-suspension-parent">TQA-PB006</td>
        <td class="td-suspension-parent">TQA-AB08</td>
        <td class="td-suspension-parent">TQA-SA08</td>
        <td class="td-suspension-parent">TQA-UB001</td>
        <td class="td-suspension-parent">TQA-SPA20</td>
      </tr>
      <tr>
        <td class="td-suspension-chlid">Parabolic Spring Straight Type</td>
        <td class="td-suspension-chlid">Pivot Bolt Kit</td>
        <td class="td-suspension-chlid">Air Spring</td>
        <td class="td-suspension-chlid">Shock Absorber</td>
        <td class="td-suspension-chlid">U-Bot Kit</td>
        <td class="td-suspension-chlid">Spring Bush</td>
      </tr>
    </tbody>
  </table>
</div>

JQuery - 单击以显示div

2 个答案: