Question

我正在为dd & dt使用切换课程它工作正常但是我想展示＆amp;隐藏在悬停时如何使用它？

<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>

Answer 1

.toggledClass{
   display: none; 
 }

你可以使用原生的.hover()功能...这需要两次回调，首先是你想要在鼠标输入上做什么，第二次你要做什么鼠标离开。

$('.navigation').hover(addYourClass, removeYourClass)

function addYourClass(){
     $('.navigation').addClass('toggledClass')
}

function removeYourClass(){
     $('.navigation').removeClass('toggledClass')
}

Answer 2

尝试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>

Answer 3

这一定非常直截了当。不确定为什么下面的代码不适合你。

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>

Answer 4

您不应该使用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。

显示和隐藏dt＆amp; dd悬停

4 个答案: