2

我有以下代码：

        <html>
        <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

        <script>
        $(document).ready(function() {
         // hides the slickbox as soon as the DOM is ready (a little sooner that page load)
          $('#slickbox').hide();
        $('#slick-slidetoggle').hover(function() {
            $('#slickbox').slideToggle(400);
            return false;
          });
        });
        </script>

        <style>
        #slickbox {
        background: #EEE;
        border: 1px solid #900;
        height: 135px;
        }
        </style>
        </head>
        <body>
        <a href="#" id="slick-slidetoggle">Slide toggle the box</a>

        <div id="slickbox" style="display: block; ">This is the box that will be shown and hidden and toggled at your whim. :)</div>
        </body>
        </html>

为了方便起见，我还把它放在了 jsfiddle 中：http: //jsfiddle.net/WFf9X/

我需要帮助来实现以下目标：

我希望能够滚动文本：滑动切换框并且框应该打开，但我也应该能够在框中移动光标，而不会关闭它。只有当光标离开框或文本滑动切换框时，框才会在 400ms 后关闭。

谢谢您的帮助。

4

1 回答 1

2

首先让#slick-slidetoggle你的孩子成为<a>：

<a href="#" id="slick-slidetoggle">
    Slide toggle the box
    <div id="slickbox" style="display: none; ">This is the box that will be shown and hidden and toggled at your whim. :)</div>
</a>

小提琴：http: //jsfiddle.net/ambiguous/WFf9X/1/

这样，<a>当鼠标在<div>. 这样做的问题是它构成了链接的整个部分，但您可以通过使用其他东西而不是和移动内部“其他东西”<div>来清理它：<a><a>

<div id="slick-slidetoggle">
    <a href="javascript:void(0)">Slide toggle the box</a>
    <div id="slickbox" style="display: none;">This is the box that will be shown and hidden and toggled at your whim. :)</div>
</div>

小提琴：http: //jsfiddle.net/ambiguous/WFf9X/2/

于 2011-07-24T23:29:11.657 回答