显示和隐藏dt和dd悬停

我使用的切换类为dd & dt它工作正常但我想显示&隐藏悬停如何使用此？显示和隐藏dt和dd悬停

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

来源

2016-04-04 Magento Dev

你看过jQuery文档中[.hover（）方法]（http://api.jquery.com/hover）的例子吗？ – nnnnnn

不可以，请你建议一些例子，但我需要dd＆dt不div类我已经看到div –

元素类型是什么都没关系。 – nnnnnn

.toggledClass{ 
    display: none; 
}

您可以使用本机.hover()功能......这需要两个回调，首先要在做什么鼠标输入，要在鼠标离开做什么第二。

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

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

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

来源

2016-04-04 06:48:05

检查我的更新问题 –

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

来源

2016-04-04 06:51:08 alexP

它显示在页面上它自我 –

这必须是非常简单的。不知道为什么下面的代码不适合你。

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>

来源

2016-04-04 07:56:18

谢谢它的工作正常如何添加到下拉也同样的东西 –

我不明白。你想隐藏悬停下拉菜单，或显示悬停下拉菜单项吗？这两个对我来说都不是一个正常的行为。 –

我有一个下拉列表onclick只显示我需要悬停 –

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

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

来源

2016-04-04 08:19:28 Lewis

显示和隐藏dt和dd悬停

回答

相关问题