个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
这是我的简单 Accordion :
<script type="text/javascript">
$(function()
{
$("dt.title").click(function()
{
$("div.info").slideUp("slow");
$(this).next("div.info:hidden").slideDown("normal" );
});
});
</script>
它与这个 html 配合得很好:
<body>
<div id="wrapper">
<div id="container">
<ul id="nav">
<dt class="title"><a href="#">About</a></dt>
<dt class="title"><a href="#">Work</a></dt>
<div class="info">
<ul>
<li><a href="#">Bol</a></li>
<li><a href="#">Annie</a></li>
<li><a href="#">Imran</a></li>
</ul>
</div>
<dt class="title"><a href="#">Contact</a></dt>
<dt class="title"><a href="#">Links</a></dt>
</ul>
</div>
<div id="content">
</div>
</div>
</body>
</html>
当我放置 href 链接时，菜单停止工作。例如:
<dt class="title"><a href="about.html">About</a></dt>
还告诉我如何在菜单中添加事件和悬停状态。
最佳答案
您忘记返回 false
<script type="text/javascript">
$(function()
{
$("dt.title").click(function(){
$("div.info").slideUp("slow");
$(this).next("div.info:hidden").slideDown("normal" );
return false; //do it here
});
});
</script>
<body>
<div id="wrapper">
<div id="container">
<ul id="nav">
<dt class="title"><a href="#">About</a></dt>
<dt class="title"><a href="about.html">Work</a></dt>
<div class="info">
<ul>
<li><a href="#">Bol</a></li>
<li><a href="#">Annie</a></li>
<li><a href="#">Imran</a></li>
</ul>
</div>
<dt class="title"><a href="#">Contact</a></dt>
<dt class="title"><a href="#">Links</a></dt>
</ul>
</div>
<div id="content">
</div>
</div>
</body>
如果您计划在 content 元素中加载 about.html 的内容，请使用 load 方法。你的函数将类似于
$("dt.title").click(function(){
$("div.info").slideToggle("slow");
$('#content').load($(this).find('a').attr('href'));
return false;
});
但这不适用于跨域网址。
[更新]
<script type="text/javascript">
//no use for this var
var loader = $("<div></div>").html('Loading')
$(document).ready(function() {
$(".title").click(function(){
$(this).find("ul").slideToggle("slow");
//do all the animations here
//but using $.get, you will get more animation effect
//I guess
$('#content').load($(this).find('a').attr('href'));
return false;
});
//similarly for inner link
$(".title ul a").click(
function ()
{
$('#content').load($(this).attr('href'));
return false;
});
});
</script>
<body>
<div id="wrapper">
<div id="container">
<ul id="nav">
<dt class="title"><a href="test.php">About</a>
<ul>
<li><a href="test.php">Bol</a></li>
<li><a href="test.php">Annie Khalid</a></li>
<li><a href="test.php">Imran</a></li>
</ul>
</dt>
<dt class="title"><a href="test.php">Work</a>
<ul>
<li><a href="test.php">Bol</a></li>
<li><a href="test.php">Annie Khalid</a></li>
<li><a href="test.php">Imran</a></li>
</ul>
</dt>
<dt class="title"><a href="test.php">Contact</a>
<ul>
<li><a href="test.php">Bol</a></li>
<li><a href="test.php">Annie Khalid</a></li>
<li><a href="test.php">Imran</a></li>
</ul>
</dt>
<dt class="title"><a href="test.php">Links</a>
<ul>
<li><a href="test.php">Bol</a></li>
<li><a href="test.php">Annie Khalid</a></li>
<li><a href="test.php">Imran</a></li>
</ul>
</dt>
</ul>
</div>
<div id="content">
<p>Welcome to my site!!!!!!!!!!!!!!!!!!!!!!!</p>
<p>In this tutorial we will be taking your average everyday website and enhancing it with jQuery.
We will be adding ajax functionality so that the content loads into the relevant container instead
of the user having to navigate to another page. We will also be integrating some awesome effects...
</p>
</div>
</div>
</body>
关于jquery - Accordion 菜单停止添加 href 链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5151718/
25
4
0
我正在尝试通过 node.js 中的 puppeteer 抓取数据 目前，我正在寻找一个脚本，用于抓取 well.ca 某个部分中的所有数据 现在，这是我试图通过 node.js 实现的方法/逻辑 1
href=""、href="#" 和 href="javascript:void(0)" 之间有什么区别? 它们有哪些不同的用途，什么时候一个比另一个更好？ 最佳答案 href=""将重新加载当前页面
这是html代码: Delivery Schedule Route Abstract Report 我有 href 值。使用 href 值，我应该找到 anchor 标记并使用 jQuery
我不确定是不是因为我使用的是 Wordpress 但 this.href 没有返回包含它们的项目的 href(例如在“联系人”上它返回 http://www.domain.net/undefined反
这个问题在这里已经有了答案: Is there a "previous sibling" selector? (33 个答案) 关闭 8 年前。
这个问题在这里已经有了答案: Are you allowed to nest a link inside of a link? (9 个回答) 关闭 6 年前。 我有一个可点击的面板，其中有一个工具
我的 css 如下所示 ul.sometclass li a { display:inline-block; } 我的 html 看起来像 outer test
我没看明白这段代码是什么意思？ a[href*=#]:not([href=#]) 谢谢! 最佳答案 简单地: a[href*=#] 获取 href 中包含 # 的所有 anchor (a)。 但是有:
document.getElementById("IDOFELEMENT"); 将其转换为链接的正确方法是什么？ 我可以写吗 document.getElementById("IDOFELEME
所以我在我的 Next JS 应用程序中遇到了这个奇怪的问题，我导入了谷歌字体，如下所示 在我的浏览器中显示的不是 href，而是 data-href="..."，所以问题是谷歌无法将此识别为链接
我想获取所选选项的 href 值，以便我现在可以转到使用按钮选择的链接。 这是我的代码
我正在尝试获取我的一个链接的 href 并将其克隆/复制到另一个链接的 href 这是我正在尝试的 var link = $('.topbook'); var link2 =
我基本上是试图从一个链接获取href，然后将其填充到另一个链接中: HTML: Link to thing Link to duplicate 脚本: $('.main-link').attr('hr
我使用的 CSS 工具提示必须包含在“a href”中才能工作。 iPad [add_to_cart_anchor item="ipad"]purchase the iPad[/add_to_c
我有一个以前是纯文本的电子邮件正文，但现在我把它变成了 HTML。电子邮件是使用多种方法生成的，但没有一种方法易于转换。 我有的是: Some content emailaddress@somethi
我正在尝试从网页中抓取数据，然后通过提取下一页的 href 来转到下一页。 但是，在这种情况下，包含下一页的 href 的标签是 href='#next'。使用 Chrome 检查此元素后，当我将鼠标
在我的 html 页面中，我看到一个链接，其“查看源代码”代码如下: 当我将鼠标悬停在链接上并单击它时，我看到了一个有效链接。但我无法找到生成此 URL 的位置和方式。我发现类 a.view 是在其
看完这篇文章net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/我
我想用 SvelteKit 构建一个 Web 应用程序，其中一页列出所有项目(带有潜在的搜索查询参数)，然后每个单独的项目一页。如果我必须使用后端生成的所有内容以老式方式构建它，我的路径将是 /ite
此 js 搜索包含 page=fleet 的 href其中: var links = document.querySelectorAll('a[href*="page=fleet"]'); var h
我是一名优秀的程序员,十分优秀！