jQuery一道小问题

L453679877 2019-07-09 12:42:24
这题怎么看，dt自动隐藏！想显示dd里面的内容出来。
...全文
1613 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
L453679877 2019-07-15
  • 打赏
  • 举报
 回复
引用 16 楼 Jacoy_six的回复:
判断一下，是显示状态的就点击dl，dd隐藏，是隐藏状态的点击dl，dd就show
不，那是因为toggle这个方法不能专递参数了
Jacoy_six 2019-07-15
  • 打赏
  • 举报
 回复
判断一下，是显示状态的就点击dl，dd隐藏，是隐藏状态的点击dl，dd就show
L453679877 2019-07-15
  • 打赏
  • 举报
 回复
var flag=false;
$("nav dt").click(
function(){
/*向下滑动从隐藏到可见*/

if (flag) {
$(this).siblings().slideDown("slow");
flag=false;
} else{
/*向上滑动从可见到隐藏*/
$(this).siblings().slideUp("slow");
flag=true;
}

},
qq274786217 2019-07-11
  • 打赏
  • 举报
 回复
把dt删掉 不就可以了吗
追热 2019-07-10
  • 打赏
  • 举报
 回复
现在toggle方法不能传递参数，只能控制选择元素的显隐。 比如$('dt').toggle()一次dt就隐藏，再$('dt').toggle()一次dt就显示。 
<!Doctype html> 
<head>
   <meta charset="utf-8"/>
   <style>
      .nav {float: left;width: 200px;margin-right: 10px;}
.nav header{ padding-left: 15px; font-size: 18px; color: #ffffff; background: #6ABB78; line-height: 45px;}
.nav ul{border: 1px #cccccc solid; border-top: none;}
.nav dt{background: #efefef; font-size: 16px; padding-left: 15px; color: #666666; line-height: 35px; border-bottom: 1px solid #ffffff; cursor: pointer;}
.nav dd{display: none;padding-left: 15px;}
.nav dd a{color: #666666; line-height: 30px;  font-size: 14px;}
   </style>
</head>
<body> 
<h1>一个定义列表：</h1> 
<nav class="nav">
<header>3333</header>
<ul>
<li><dl>
    <dt>css网站</dt> 
    <dd>网址为www.divcss5.com</dd> 
    <dd>网址为www.divcss5.com</dd> 
    <dd>网址为www.divcss5.com</dd> 
</dl> 
</li>
<li><dl>
    <dt>css网站2</dt> 
    <dd>22222</dd> 
    <dt>3333333</dt> 

</dl> 
</li>
</nav>
<button type='button' onclick='toggle()'>toggle</button>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script type="text/javascript">
	function toggle(){
		$('dt').toggle()
	}
</script>
</body> 
</html>
追热 2019-07-10
  • 打赏
  • 举报
 回复
引用 12 楼 L453679877 的回复:
[quote=引用 11 楼 追热的回复:]现在toggle方法不能传递参数，只能控制选择元素的显隐。 比如$('dt').toggle()一次dt就隐藏，再$('dt').toggle()一次dt就显示。 
<!Doctype html> 
<head>
   <meta charset="utf-8"/>
   <style>
      .nav {float: left;width: 200px;margin-right: 10px;}
.nav header{ padding-left: 15px; font-size: 18px; color: #ffffff; background: #6ABB78; line-height: 45px;}
.nav ul{border: 1px #cccccc solid; border-top: none;}
.nav dt{background: #efefef; font-size: 16px; padding-left: 15px; color: #666666; line-height: 35px; border-bottom: 1px solid #ffffff; cursor: pointer;}
.nav dd{display: none;padding-left: 15px;}
.nav dd a{color: #666666; line-height: 30px;  font-size: 14px;}
   </style>
</head>
<body> 
<h1>一个定义列表：</h1> 
<nav class="nav">
<header>3333</header>
<ul>
<li><dl>
    <dt>css网站</dt> 
    <dd>网址为www.divcss5.com</dd> 
    <dd>网址为www.divcss5.com</dd> 
    <dd>网址为www.divcss5.com</dd> 
</dl> 
</li>
<li><dl>
    <dt>css网站2</dt> 
    <dd>22222</dd> 
    <dt>3333333</dt> 

</dl> 
</li>
</nav>
<button type='button' onclick='toggle()'>toggle</button>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script type="text/javascript">
	function toggle(){
		$('dt').toggle()
	}
</script>
</body> 
</html>
老哥，那我想这样写。应该怎么样才行， <body> <dl><dt>aaa</dt> <dd>asdsadsadasdasda</dd> <dd>asdsadsadasdasda</dd> <dd>asdsadsadasdasda</dd> </dl> <script src="../jquery-3.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("dt").toggle( function(){ $("dd").slideDown("slow"); }, function(){ $("dd").slideUp("slow") } ); }); </script> </body>[/quote] 
$('dt').on('click',()=>{
	$("dd").css('display')=='none'
	?$("dd").slideDown("slow")
	:$("dd").slideUp("slow");
})
L453679877 2019-07-10
  • 打赏
  • 举报
 回复
引用 11 楼 追热的回复:
现在toggle方法不能传递参数，只能控制选择元素的显隐。 比如$('dt').toggle()一次dt就隐藏，再$('dt').toggle()一次dt就显示。 
<!Doctype html> 
<head>
   <meta charset="utf-8"/>
   <style>
      .nav {float: left;width: 200px;margin-right: 10px;}
.nav header{ padding-left: 15px; font-size: 18px; color: #ffffff; background: #6ABB78; line-height: 45px;}
.nav ul{border: 1px #cccccc solid; border-top: none;}
.nav dt{background: #efefef; font-size: 16px; padding-left: 15px; color: #666666; line-height: 35px; border-bottom: 1px solid #ffffff; cursor: pointer;}
.nav dd{display: none;padding-left: 15px;}
.nav dd a{color: #666666; line-height: 30px;  font-size: 14px;}
   </style>
</head>
<body> 
<h1>一个定义列表：</h1> 
<nav class="nav">
<header>3333</header>
<ul>
<li><dl>
    <dt>css网站</dt> 
    <dd>网址为www.divcss5.com</dd> 
    <dd>网址为www.divcss5.com</dd> 
    <dd>网址为www.divcss5.com</dd> 
</dl> 
</li>
<li><dl>
    <dt>css网站2</dt> 
    <dd>22222</dd> 
    <dt>3333333</dt> 

</dl> 
</li>
</nav>
<button type='button' onclick='toggle()'>toggle</button>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script type="text/javascript">
	function toggle(){
		$('dt').toggle()
	}
</script>
</body> 
</html>
老哥，那我想这样写。应该怎么样才行， <body> <dl><dt>aaa</dt> <dd>asdsadsadasdasda</dd> <dd>asdsadsadasdasda</dd> <dd>asdsadsadasdasda</dd> </dl> <script src="../jquery-3.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("dt").toggle( function(){ $("dd").slideDown("slow"); }, function(){ $("dd").slideUp("slow") } ); }); </script> </body>
usecf 2019-07-09
  • 打赏
  • 举报
 回复
看看你nav 样式里面怎么写的 或者把这个样式去掉应该就能显示出来了
L453679877 2019-07-09
  • 打赏
  • 举报
 回复
引用 9 楼 追热的回复:
[quote=引用 8 楼 L453679877 的回复:] [quote=引用 7 楼 usecf的回复:]<!Doctype html> <head> <meta charset="utf-8"/> <style> .nav {float: left;width: 200px;margin-right: 10px;} .nav header{ padding-left: 15px; font-size: 18px; color: #ffffff; background: #6ABB78; line-height: 45px;} .nav ul{border: 1px #cccccc solid; border-top: none;} .nav dt{background: #efefef; font-size: 16px; padding-left: 15px; color: #666666; line-height: 35px; border-bottom: 1px solid #ffffff; cursor: pointer;} .nav dd{display: none;padding-left: 15px;} .nav dd a{color: #666666; line-height: 30px; font-size: 14px;} </style> </head> <body> <h1>一个定义列表：</h1> <nav class="nav"> <header>3333</header> <ul> <li><dl> <dt>css网站</dt> <dd>网址为www.divcss5.com</dd> <dd>网址为www.divcss5.com</dd> <dd>网址为www.divcss5.com</dd> </dl> </li> <li><dl> <dt>css网站2</dt> <dd>22222</dd> <dt>3333333</dt> </dl> </li> </nav> </body> </html>
我觉得是我书写问题吗？ 我写这段也感觉是一样隐藏了 <body> <dl><dt>aaa</dt> <dd>asdsadsadasdasda</dd> <dd>asdsadsadasdasda</dd> <dd>asdsadsadasdasda</dd> </dl> <script src="../jquery-3.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("dt").toggle( function(){ $("dd").slideDown("slow"); }, function(){ $("dd").slideUp("slow") } ); }); </script> </body>[/quote] jq版本问题，现在toggle只能切换显隐，要使用请引用1.8之前版本的jq[/quote] 我不就是配置显隐吗？
追热 2019-07-09
  • 打赏
  • 举报
 回复
引用 8 楼 L453679877 的回复:
[quote=引用 7 楼 usecf的回复:]<!Doctype html> <head> <meta charset="utf-8"/> <style> .nav {float: left;width: 200px;margin-right: 10px;} .nav header{ padding-left: 15px; font-size: 18px; color: #ffffff; background: #6ABB78; line-height: 45px;} .nav ul{border: 1px #cccccc solid; border-top: none;} .nav dt{background: #efefef; font-size: 16px; padding-left: 15px; color: #666666; line-height: 35px; border-bottom: 1px solid #ffffff; cursor: pointer;} .nav dd{display: none;padding-left: 15px;} .nav dd a{color: #666666; line-height: 30px; font-size: 14px;} </style> </head> <body> <h1>一个定义列表：</h1> <nav class="nav"> <header>3333</header> <ul> <li><dl> <dt>css网站</dt> <dd>网址为www.divcss5.com</dd> <dd>网址为www.divcss5.com</dd> <dd>网址为www.divcss5.com</dd> </dl> </li> <li><dl> <dt>css网站2</dt> <dd>22222</dd> <dt>3333333</dt> </dl> </li> </nav> </body> </html>
我觉得是我书写问题吗？ 我写这段也感觉是一样隐藏了 <body> <dl><dt>aaa</dt> <dd>asdsadsadasdasda</dd> <dd>asdsadsadasdasda</dd> <dd>asdsadsadasdasda</dd> </dl> <script src="../jquery-3.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("dt").toggle( function(){ $("dd").slideDown("slow"); }, function(){ $("dd").slideUp("slow") } ); }); </script> </body>[/quote] jq版本问题，现在toggle只能切换显隐，要使用请引用1.8之前版本的jq
L453679877 2019-07-09
  • 打赏
  • 举报
 回复
引用 7 楼 usecf的回复:
<!Doctype html> <head> <meta charset="utf-8"/> <style> .nav {float: left;width: 200px;margin-right: 10px;} .nav header{ padding-left: 15px; font-size: 18px; color: #ffffff; background: #6ABB78; line-height: 45px;} .nav ul{border: 1px #cccccc solid; border-top: none;} .nav dt{background: #efefef; font-size: 16px; padding-left: 15px; color: #666666; line-height: 35px; border-bottom: 1px solid #ffffff; cursor: pointer;} .nav dd{display: none;padding-left: 15px;} .nav dd a{color: #666666; line-height: 30px; font-size: 14px;} </style> </head> <body> <h1>一个定义列表：</h1> <nav class="nav"> <header>3333</header> <ul> <li><dl> <dt>css网站</dt> <dd>网址为www.divcss5.com</dd> <dd>网址为www.divcss5.com</dd> <dd>网址为www.divcss5.com</dd> </dl> </li> <li><dl> <dt>css网站2</dt> <dd>22222</dd> <dt>3333333</dt> </dl> </li> </nav> </body> </html>
我觉得是我书写问题吗？ 我写这段也感觉是一样隐藏了 <body>
<dl><dt>aaa</dt>
<dd>asdsadsadasdasda</dd>
<dd>asdsadsadasdasda</dd>
<dd>asdsadsadasdasda</dd>
</dl>

<script src="../jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("dt").toggle(
function(){
$("dd").slideDown("slow");
},
function(){
$("dd").slideUp("slow")
}

);
});
</script>
</body>
usecf 2019-07-09
  • 打赏
  • 举报
 回复
<!Doctype html> <head> <meta charset="utf-8"/> <style> .nav {float: left;width: 200px;margin-right: 10px;} .nav header{ padding-left: 15px; font-size: 18px; color: #ffffff; background: #6ABB78; line-height: 45px;} .nav ul{border: 1px #cccccc solid; border-top: none;} .nav dt{background: #efefef; font-size: 16px; padding-left: 15px; color: #666666; line-height: 35px; border-bottom: 1px solid #ffffff; cursor: pointer;} .nav dd{display: none;padding-left: 15px;} .nav dd a{color: #666666; line-height: 30px; font-size: 14px;} </style> </head> <body> <h1>一个定义列表：</h1> <nav class="nav"> <header>3333</header> <ul> <li><dl> <dt>css网站</dt> <dd>网址为www.divcss5.com</dd> <dd>网址为www.divcss5.com</dd> <dd>网址为www.divcss5.com</dd> </dl> </li> <li><dl> <dt>css网站2</dt> <dd>22222</dd> <dt>3333333</dt> </dl> </li> </nav> </body> </html>
L453679877 2019-07-09
  • 打赏
  • 举报
 回复
引用 5 楼 usecf的回复:
我试了下你代码和css样式 在谷歌浏览器下没什么问题 是不是你js的问题 你可以把js文件先注释掉 试试
兄弟能让我看看你的代码吗！我这边试了很多遍了
usecf 2019-07-09
  • 打赏
  • 举报
 回复
我试了下你代码和css样式 在谷歌浏览器下没什么问题 是不是你js的问题 你可以把js文件先注释掉 试试
L453679877 2019-07-09
  • 打赏
  • 举报
 回复
引用 3 楼 usecf的回复:
.nav dd{display: none;padding-left: 15px;} 你这不是把dd隐藏了
对的，是隐藏dd内容啊，问题是现在dt这个块也，隐藏了，主要是通过点击dt来显示或者隐藏dd
usecf 2019-07-09
  • 打赏
  • 举报
 回复
.nav dd{display: none;padding-left: 15px;} 你这不是把dd隐藏了
L453679877 2019-07-09
  • 打赏
  • 举报
 回复
引用 1 楼 usecf的回复:
看看你nav 样式里面怎么写的 或者把这个样式去掉应该就能显示出来了
.nav {float: left;width: 200px;margin-right: 10px;}
.nav header{ padding-left: 15px; font-size: 18px; color: #ffffff; background: #6ABB78; line-height: 45px;}
.nav ul{border: 1px #cccccc solid; border-top: none;}
.nav dt{background: #efefef; font-size: 16px; padding-left: 15px; color: #666666; line-height: 35px; border-bottom: 1px solid #ffffff; cursor: pointer;}
.nav dd{display: none;padding-left: 15px;}
.nav dd a{color: #666666; line-height: 30px; font-size: 14px;} 我觉得貌似没什么问题
一道关于Ajax、Jquery的面试题
一道关于Ajax、Jquery的面试题，请各位好友把它做好
网址编码解码，jQuery版Url.encode,Url.decode,Url.parse.rar
网址编码解码，jQuery版Url.encode,Url.decode,Url.parse，一个来自jQuery的URL Decoder解码、编码插件，为你的URL安全定义一道安全防线，示例文件本身就是一个值得学习的实例，自带的示例将告诉你如何使用这款URL...
jquery练手小案例
jQuery是-个快速、极简的JavaScript框架， 它是-个优秀的JavaScript代码库，设计的宗旨是“writeless，Do More”,即倡导写更少的代码，做更多的事情。它提供一种简便的JavaScript设计模式， 优化HTML文档操作、事件...
jQuery和CSS3炫酷按钮点击波特效
这是一款效果非常炫酷的jQuery和CSS3炫酷按钮点击波特效。该特效当用户在菜单按钮上点击的时候，从鼠标点击的点开始，会有一道光波以改点为原点向外辐射的动画效果，非常绚丽。
jquery背景位置动态变换插件
通过背景位置的动态变换，你甚至可以做出像是用flash作出的精湛动画效果。我们可以通过这一插件实现。有一个例子是Google.com...当鼠标移上去时，你可以看到一道闪光闪过。这其实就只是background position变换而已。
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章