- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有一个看起来像这样的按钮:
<button class="button-global button-a" id="more" target="1">More Info</button>
它触发扩展文本:
$('.p2').hide();
$('#more').click(function (ev) {
var t = ev.target
$('#expanded' + $(this).attr('target')).toggle(50, function(){
console.log(ev.target)
$(t).html($(this).is(':visible')? 'Simplify' : 'More Info')
});
return false;
});
我想要这个链接(只有 aboutus
链接):
<a class="pcnav navlinks" href="#aboutus-target">About Us</a>
在单击时也触发扩展文本,但如果扩展已经可见则不触发文本,我不希望文本在 aboutus
上发生变化,就像它对按钮所做的那样,
(让新人更容易看到帖子,因为它变得有点困惑)
任何帮助都会很棒!
最佳答案
<a>
& <button>
解决方案每个<a>
, <button>
, & <section class='content...'>
有:
一个“公共(public)静态类”:.x
两个“共享状态类”:.on
和 .off
为了控制具有同一组类的不同标签,CSS/jQuery 选择器被声明为组合,从而为多个标签建立特定行为,同时共享一个类,允许轻松访问所有标签作为一个组。查看 Demo 2 的 CSS 部分中的注释以了解详细信息。
详情在演示中评论。
$('.more').on('click', function() {
// Get the #id of the closest article.p
var page = $(this).closest('.p').attr('id');
// Toggle .on/.off on all .x within article.p
$(`#${page} .x`).toggleClass('on off');
});
/*
Exclude .link.on to ensure click event is only
triggered when .off class is assigned to .link
*/
$('.link').not('.on').on('click', function() {
/*+ Expand .content located within the same .p
var page = $(this).closest('.p').attr('id');
$(`#${page} .x`).addClass('on').removeClass('off');
//-*/
//*- Expand .content located at this.href
var jump = $(this).attr('href');
$(`${jump} .x`).addClass('on').removeClass('off');
//-*/
// Scroll to this.href
$('html, body').animate({
scrollTop: $(jump).offset().top
}, 550);
});
html {
overflow-y: scroll;
overflow-x: hidden;
}
html,
body {
background: #fff;
padding: 20px;
font: 400 small-caps 16px/1.45 Arial;
}
main {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
article {
background: none;
display: table;
width: 100%;
}
nav,
section,
footer {
background: #222;
color: #fc3;
padding: 20px;
text-align: center;
font-size: 1rem;
margin: 0 auto;
width: 300px;
}
nav {
padding: 10px 20px;
margin: 0em auto -0.5em;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
section p {
text-align: left;
}
footer {
padding: 15px 20px 10px;
margin: -2.8em auto 2.25em;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
.link,
footer b {
font-size: 1.5rem;
color: #fc3;
}
nav b {
display: inline-block;
font-size: 1.5rem;
width: 1em;
}
button {
background: #fc3;
color: #000;
border: none;
border-radius: 5px;
padding: 8px 14px;
font: inherit;
font-size: 1.2rem;
cursor: pointer;
width: 150px;
}
/*
The next four rulesets demonstrate how only two
classes can be shared between multiple tags and still
provide different behavior and purpose.
*/
.content.off {
max-height: 0;
font-size: 0;
color: transparent;
opacity: 0;
transition: color 0.65s, max-height 0.95s, font-size 0.95s, opacity 2.5s;
}
.content.on {
height: auto;
max-height: 5000px;
font-size: 1.1rem;
color: #fc3;
opacity: 1;
transition: all 0.75s;
}
.more.off::before {
content: 'More Info';
}
.more.on::before {
content: 'Simplify';
}
<main id='doc'>
<article id='p1' class='p'>
<nav>
<a class="link x off" href="#p2">Next</a>
</nav>
<section>
<button class="more x off"></button>
</section>
<section class="content x off">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
<p>I am so happy, my dear friend, so absorbed in the exquisite...</p>
</section>
<footer>
<b>1</b>
</footer>
</article>
<article id='p2' class='p'>
<nav>
<a class="link x off" href="#p1">Prev</a>
<b>|</b>
<a class="link x off" href="#p3">Next</a>
</nav>
<section>
<button class="more x off"></button>
</section>
<section class="content x off">
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>
<p>He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
<p>The bedding was hardly...</p>
</section>
<footer>
<b>2</b>
</footer>
</article>
<article id='p3' class='p'>
<nav>
<a class="link x off" href="#p2">Prev</a>
</nav>
<section>
<button class="more x off"></button>
</section>
<section class="content x off">
<p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog.</p>
<p>Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs.</p>
<p>Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.</p>
</section>
<footer>
<b>3</b>
</footer>
</article>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a>
& <button>
解决方案以下演示将点击事件分别分配给按钮和链接。三元条件的结构如下:
variable = condition ? TRUE : FALSE;
.另外,.class
( .more
) 代替了 #id
( #more
) 作为更好的选择,但这不是必需的。
$('.content').hide();
$('.more').on('click', function() {
var txt = $(this).text() === 'Simplify' ? 'More Info' : 'Simplify';
$(this).text(txt);
$('.content').toggle();
});
$('.navLink').on('click', function() {
$('.content').show();
$('.more').text('Simplify');
});
<button class="more">More Info</button><br>
<a class="navLink" href="#about">About Us</a>
<p class='content'>
Content.
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
✱Ryan Wheale's 的一个分支风格很好Fiddle .
关于javascript - 使 <a> 链接激活展开文本按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53715274/
我目前正在使用发现的重力脚本 here为了在我的网页上创建重力效果,我正在本地开发 atm。 我的问题是,重力效果的激活似乎是在鼠标移动时进行的,而我需要它在文档准备好时才触发。 google.cod
我正在尝试关注 Railsbridge Intallfest 并尝试将我的第一个 Rails 应用程序部署到 heroku。我不断收到以下错误消息: Gem::LoadError: Specified
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
Home-tab 是默认选中的,但是它的颜色是灰色的:( Home Bla Contact
我没有得到它的工作,我不知道为什么......遗憾的是其他问题 + 答案没有帮助。 测试设备: iPhone 6 iPad 2 相关代码: override func viewWillTransiti
我试图加载一个 View ,就像用户已经按下 UISearchBar 一样。我希望 SearchController 加载顶部的 UISearchBar 以及取消按钮。 我已经试过了: func ac
试图在 if whiteDotDist < centerRadius - whiteDotRadius 时获取代码执行它下面的所有代码都是事件的,并且当它下面的代码被执行时它再次变为非事件状态直到if
我正在使用 anaconda python。所以每次,在我的 mac 终端中,我输入终端命令: source /Users/mylaptop/anaconda/bin/activate /Users/
在我的 Angular 项目中,我有这种代码: this.swUpdate.available.subscribe(() => { ... }); 它工作正常,但给了我关于 activated 被
我想弄清楚 Julia 包是如何工作的,因为我喜欢容器化环境。我真的很挣扎。 在 python 中,我会做类似 conda create env --name ds 的事情创建环境然后安装容器化包我会
我的宏中有一些代码如下 ChDir File_pth Workbooks.Open filename:= File_pth & "\" & open_tkt Workbooks.Open filena
长话短说,我有两张纸,一张是“原始数据”,另一张是“结果”。我试图让结果表从“原始数据”表的每第七行中提取文本或数字,因此“结果”中的 A1 将是原始数据中的 A1,“结果”中的 A2 将是“原始数据
我不知道如何做到这一点,或者我是否可以做到这一点。我有一个 jQuery UI Accordion,多个部分,每个部分包含多个 anchor 标记,每个 anchor 标记都有一个唯一的字符串 id。
我不敢相信我还没有找到任何关于此的文档,但我想知道如何命令键盘激活并接收来自它的输入。我可以找到在编辑文本字段时操作弹出键盘的所有示例。谢谢 最佳答案 您还可以使用 UIKeyInput 协议(pro
我正在尝试为我的 Electron 应用程序生成NSIS安装程序的日志。为此,我创建了一个文件'logging.nsh'来定义LogSet和LogText宏。 以下是logging.nsh文件的代码:
几周前,我开始使用 typescript 和 knockoutJS,我有一个具体的问题,但我有解决方案,它太丑了,我无法忍受,但无法从中得到任何更好的东西,有太多代码需要粘贴,但我会尽力描述我的问题:
当我尝试激活我的虚拟环境时收到此错误即源 ~/edu-venv/bin/activate -bash: /home/vagrant/edu-venv/bin/activate: No such fil
要创建触发器,似乎必须发布它才能生效。但是发布需要对“协作”分支进行 PR,这意味着我们甚至在测试触发器是否实际工作之前就必须创建一个 PR,并且还必须创建多个后续 PR,直到我们获得正确的触发器。
我是最近的 IntelliJ Idea 用户,我不知道如何启用 Hibernate。当我右键单击我的项目时,Hibernate 不会出现在“添加框架支持”菜单中(实际上我唯一可以选择的技术是 Groo
要创建触发器,似乎必须发布它才能生效。但是发布需要对“协作”分支进行 PR,这意味着我们甚至在测试触发器是否实际工作之前就必须创建一个 PR,并且还必须创建多个后续 PR,直到我们获得正确的触发器。
我是一名优秀的程序员,十分优秀!