Question

好的，所以在php标签中我有这个：

<?php
echo "<ul>";
echo "<li id='lis'> WELCOME ".$_SESSION['username']."!<ul><li><a href='#'>link1</a></li></ul></li>";
echo "<ul>";
?>

我正在努力使它在悬停时显示link1。所以我使用的是jquery，我的代码是：

</style>
<script type="text/javascript"src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('li').hover(function(){
        $(this).find('ul>li').fadeToggle(400);
    });
});

我不知道该怎么做才能解决这个问题，请帮忙！如果您对如何修复代码有任何建议请在下面留下我真的很感激。

这是整个事情：

            <html>
        <head>
            <title></title>
            <style type="text/css">
            ul{
            margin:0;
            padding:0;
            list-style: none;
            float: right;
        }
        ul li{
            float: left;
            width: 150px;
            height: 30px;
            line-height: 30px;
        }
        ul li a{
            background-color: cyan;
            color: white;
            text-decoration: none;
        }
        ul li li {
            color:#fff;
            display: none;
        }

        ul li{
            text-decoration: none;
            color: #fff;
        }

        .top{
            position: static;
            right: 0;
            top: 0px;
        }

            </style>
            <script type="text/javascript"src="js/jquery-1.9.1.js"></script>
            <script type="text/javascript">
            $(document).ready(function(){
                $('li').hover(function(){
                    $(this).find('ul>li').fadeToggle(400);
                });
            });
            </script>
        </head>
        <body>
        <?php
            echo "<ul>";
            echo "<li id='lis'> WELCOME ".$_SESSION['username']."!<ul><li><a href='#'>hello</a></li></ul></li>";
            echo "<ul>";
        ?>
        </body>
        </html>

名为welcome.php 我有另一个名为index.php的文件，我把它包含在我的php中。

Answer 1

隐藏包含该链接的li，然后切换它。

＆＃13;

$(document).ready(function() {
  $('#lis').hover(function() {
    $(this).find('ul>li').fadeToggle(400);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul>
  <li id='lis'>WELCOME ".$_SESSION['username']."!
    <ul>
      <li style="display:none;"><a href='#'>link1</a>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

添加一个隐藏渲染链接的类。

然后定位a并切换。

在您的情况下，如果您隐藏li则不起作用，因为如果您隐藏li

，则没有可悬停的元素

<强> JS

$('li').hover(function() {
  $(this).find('ul > li > a').fadeToggle(400);
});

<强> HTML

<a href='#' class="hide">link1</a>

<强> CSS

.hide {
  display: none;
}

<强> jsFiddle

Answer 3

由于您的$('li')选择了文档中的所有<li>，请添加<li><a href='#'>link1</a></li>，然后尝试使用#id选择器：

$(document).ready(function(){
    $('#lis').hover(function(){
        $(this).find('ul>li').fadeToggle(400);
    });
});

jquery $（this）.find不适合我

3 个答案: