显示和隐藏dt&dd悬停

Show and hide dt & dd on hover

本文关键字：dd 悬停 amp 隐藏 dt 显示      更新时间：2023-11-29

我正在为dd & dt使用一个切换类，它运行良好，但我想显示&悬停时隐藏如何使用？

<div class="navigation">
                    <dt><?php echo $this->__($_filter->getName()) ?></dt>
                    <dd><?php echo $_filter->getHtml() ?></dd>
                </div>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script type="text/javascript">
    jQuery=$.noConflict();
    jQuery(document).ready(function() {
        jQuery('.navigation dd').hide(); 
        jQuery('.navigation dt').click(function(){ 
                jQuery(this).next('dd').slideToggle('slow');
                jQuery(this).toggleClass('glace_navigationlayer-collapsed'); 

            });

     }); 
    </script>

您不应该在悬停时使用Javascript来显示和隐藏元素。CSS将是一个更好的选择。

.navigation dt:hover + dd {
  display: none;
}
/*Don't care about this code*/
.navigation dt {
  background-color: red;
}
.navigation dd {
  background-color: green;
}
<div class="navigation">
  <dt>dt</dt>
  <dd>dd</dd>
</div>

+选择器将选择下一个同级。这意味着您必须将dd放在dt之后。

这必须非常直接。不确定为什么下面的代码不适用于您。

var $ = jQuery;
$(document).ready(function() {
  $('.navigation dd').hide(); 
  $('.navigation dt').hover(function(){ 
    $(this).next('dd').stop(true).slideToggle('slow');
    $(this).toggleClass('glace_navigationlayer-collapsed'); 
  });
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <dt>YOUR DT</dt>
  <dd>YOUR DD</dd>
</div>

.toggledClass{
   display: none; 
 }

您可以使用本机.hover()函数。。。这需要两个回调，第一个是您想在鼠标输入时执行的操作，第二个是您想要在鼠标离开时执行的行为。

$('.navigation').hover(addYourClass, removeYourClass)
function addYourClass(){
     $('.navigation').addClass('toggledClass')
}
function removeYourClass(){
     $('.navigation').removeClass('toggledClass')
}

尝试mouseenter和mouseleave。

jQuery('.navigation dd').hide();
jQuery('.navigation dt').on('mouseenter mouseleave', function() {
  jQuery(this).next('dd').slideToggle('slow');
  jQuery(this).toggleClass('glace_navigationlayer-collapsed');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<dl class="navigation">
  <dt>Chrome</dt>
  <dd>by Google</dd>
  <dt>Safari</dt>
  <dd>by Apple</dd>
<dl>

相关文章：