关于JavaScript中的hover

悬停显示dd。它工作正常，但问题是我无法在dd中单击。如果我移动dd，它将隐藏。我该如何解决这个问题

HTML

JavaScript

var$=jQuery；
$（文档）.ready（函数（）{
$（'.navigation dd'）.hide（）；
$（'.navigation dt'）.hover（函数（）{
$（this.next（'dd'）。stop（true）。slideToggle（'slow'）；
$（this.toggleClass（'glace_navigationlayer-collapsed'）；
});
});

您可以这样使用代码

  $('.navigation').hover(function(){ 
    $(this).find('dd').stop(true).slideToggle('slow');
    $(this).find('dt').toggleClass('glace_navigationlayer-collapsed'); 
  });

---

您可以在纯CSS中实现这一效果，它总是优于JS：

$（'dd'）。单击（函数（）{
$（this.toggleClass（'clicked'）；
})
$（'.navigation dt'）.hover（函数（）{
$（this.toggleClass（'glace_navigationlayer-collapsed'）；
});
dt，dd{高度：50px；背景：绿色；颜色：白色；边距：0}
dd{高度：0；过渡：所有0.2s线性；溢出：隐藏；背景：蓝色}
dt:hover+dd，dd:hover{height:50px}
dd.clicked{背景：黄色；颜色：黑色}
dt.glace_导航层-折叠{颜色：黄色}

这是DT，让我停下来
这是DD，点击我
你想“拖放”吗？对不起，我不擅长javascript，你能不能给我举个“拖放”的例子，就像你做Windows图标一样。你能给我举个例子，但我只需要悬停在
悬停
上使用
鼠标指针
。它会起作用。
slow
只给你时间点击dd。这不是一个有效的想法。你仍然可以使用JS添加类，但保留CSS用于动画。只是一个建议。请注意，您现在也可以单击DD。在悬停时添加了类更改。但是类没有添加“它将始终优于JS”，这是一个粗体的语句，也不总是正确的。很抱歉，我没有得到
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    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>

  $('.navigation').hover(function(){ 
    $(this).find('dd').stop(true).slideToggle('slow');
    $(this).find('dt').toggleClass('glace_navigationlayer-collapsed'); 
  });