文字隐藏与展开的js问题

day_moon 2016-01-28 10:00:06

鼠标放到“>”上时，隐藏的文字会在“杂志期刊”的后侧显示出来，跪求源码？不明白效果的话，请点击该链接
http://yuedu.163.com/book/category/category/12000

...全文

342 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

街头小贩 2016-01-29

打赏
举报

一些菜单类的插件都可以

街头小贩 2016-01-29

打赏
举报

http://jqueryui.com/menu/


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Menu - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#menu" ).menu();
  });
  </script>
  <style>
  .ui-menu { width: 150px; }
  </style>
</head>
<body>
 
<ul id="menu">
  <li class="ui-state-disabled">Aberdeen</li>
  <li>Ada</li>
  <li>Adamsville</li>
  <li>Addyston</li>
  <li>Delphi
    <ul>
      <li class="ui-state-disabled">Ada</li>
      <li>Saarland</li>
      <li>Salzburg an der schönen Donau</li>
    </ul>
  </li>
  <li>Saarland</li>
  <li>Salzburg
    <ul>
      <li>Delphi
        <ul>
          <li>Ada</li>
          <li>Saarland</li>
          <li>Salzburg</li>
        </ul>
      </li>
      <li>Delphi
        <ul>
          <li>Ada</li>
          <li>Saarland</li>
          <li>Salzburg</li>
        </ul>
      </li>
      <li>Perch</li>
    </ul>
  </li>
  <li class="ui-state-disabled">Amesville</li>
</ul>
 
 
</body>
</html>

day_moon 2016-01-28

打赏
举报

谢谢各路大神回答，我是做后台的，实在不懂前台的东西，求跪求源码？

杨小事er 2016-01-28

打赏
举报

楼主，你看错拉，不是鼠标放在>的时候就显示，而是放在那个div里就可以显示旁边的部分，显示的同时>消失。这个特效就是普通的鼠标移入移出，鼠标放在div里，显示隐藏的div，移出，隐藏div。

香蕉猪 2016-01-28

打赏
举报

可以用css动画。。。

Abel-lin 2016-01-28

打赏
举报

假设“>”的id为a，隐藏文字id为b $('#a').hover(function(){ $('#b').show() })

ruanjian123456123 2016-01-28

打赏
举报

onMouseOver="xs()" function xs(){ document.getelementbyid("后面的文本id").stley="block"; }

day_moon 2016-01-28

打赏
举报

全部代码如下：也是不得啊。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航菜单</title> <script src="../js/jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(".category").hover(function(){ $(".more").show(); },function(){ $(".more").hide(); }); </script> </head> <body> <div class="category"> <div class="sub"> <h3 class="fl">图书<i style="display: block;"></i></h3> <p> <a href="http://yuedu.163.com/book/category/category/100" data-model="index" data-opration="ts">流行小说</a> <a href="http://yuedu.163.com/book/category/category/300" data-model="index" data-opration="ts">社科历史</a> <a class="ll" href="http://yuedu.163.com/book/category/category/12000/0_0_2" data-model="index" data-opration="ts">杂志期刊</a> </p> <p> <a href="http://yuedu.163.com/book/category/category/200" data-model="index" data-opration="ts">经济管理</a> <a href="http://yuedu.163.com/book/category/category/400" data-model="index" data-opration="ts">文学艺术</a> <a class="ll" href="http://yuedu.163.com/book/category/category/800" data-model="index" data-opration="ts">生活</a> </p> </div> <div class="more more-fl" style="display: none;"> <p class="f-cb"> <a href="/book/category/category/500" target="_blank" data-model="index" data-opration="ts">感</a> <a href="/book/category/category/600" target="_blank" data-model="index" data-opration="ts">成功励志</a> <a class="ll" href="/book/category/category/700" target="_blank" data-model="index" data-opration="ts">儿</a> <a href="/book/category/category/900" target="_blank" data-model="index" data-opration="ts">影像画册</a> <a href="/book/category/category/1000" target="_blank" data-model="index" data-opration="ts">经典名著</a> <a class="ll" href="/book/category/category/14000" target="_blank" data-model="index" data-opration="ts">外文外版</a> </p> </div> </div> </body> </html>

小小农民 2016-01-28

打赏
举报

引用 7 楼 day_moon 的回复:

六楼，你的没有实现我想要的功能，鼠标放到“>”上时，隐藏的文字会在“杂志期刊”的后侧显示出来。下面是运行你上面的代码：结果就是你看到的

我样式没有加的啊，关注js代码


 $(".category").hover(function(){
        $(".more").show();
      },function(){
        $(".more").hide();
      });

实现展开和隐藏。上面那个是个例子

day_moon 2016-01-28

打赏
举报

六楼，你的没有实现我想要的功能，鼠标放到“>”上时，隐藏的文字会在“杂志期刊”的后侧显示出来。
下面是运行你上面的代码：结果就是你看到的

小小农民 2016-01-28

打赏
举报

可以用hover属性控制。


<script type="text/javascript">
  window.onload = function () {

    $(".category").hover(function(){
        $(".more").show();
      },function(){
        $(".more").hide();
      });
    }

</script>

  <div class="category">
    <div class="sub">
      <h3 class="fl">图书<i style="display: block;"></i></h3>
      <p>
        <a href="http://yuedu.163.com/book/category/category/100" data-model="index" data-opration="ts">流行小说</a>
        <a href="http://yuedu.163.com/book/category/category/300" data-model="index" data-opration="ts">社科历史</a>
        <a class="ll" href="http://yuedu.163.com/book/category/category/12000/0_0_2" data-model="index" data-opration="ts">杂志期刊</a>
      </p>
      <p>
        <a href="http://yuedu.163.com/book/category/category/200" data-model="index" data-opration="ts">经济管理</a>
        <a href="http://yuedu.163.com/book/category/category/400" data-model="index" data-opration="ts">文学艺术</a>
        <a class="ll" href="http://yuedu.163.com/book/category/category/800" data-model="index" data-opration="ts">生活</a>
      </p>
    </div>
    <div class="more more-fl" style="display: none;">
      <p class="f-cb">
        <a href="/book/category/category/500" target="_blank" data-model="index" data-opration="ts">感</a>
        <a href="/book/category/category/600" target="_blank" data-model="index" data-opration="ts">成功励志</a>
        <a class="ll" href="/book/category/category/700" target="_blank" data-model="index" data-opration="ts">儿</a>
        <a href="/book/category/category/900" target="_blank" data-model="index" data-opration="ts">影像画册</a>
        <a href="/book/category/category/1000" target="_blank" data-model="index" data-opration="ts">经典名著</a>
        <a class="ll" href="/book/category/category/14000" target="_blank" data-model="index" data-opration="ts">外文外版</a>
      </p>
    </div>
  </div>