更改togglejquery顶部的文本
change text on top of toggle jquery
我有一堆这样的,当用户单击"最大化"时,div会展开以显示内容。内容向下切换后,底部要最小化的链接可见。当单击该链接时,它将正确切换,我只是在寻找一种方法来更改第一个链接中的文本,因为目前jQuery只更改单击的链接的文本。有什么方法可以轻松做到这一点吗?使用Parent()
然后使用Child()
返回到顶部表a
?
切换时,应将both#bridge
分别更改为+ Expand
或- Minimize
。
javascript
<script type="text/JavaScript" language="javascript">
$(document).ready(function() {
$(".expand").click(function(e) {
e.preventDefault();
var toggle = $(this).attr('href');
var txt = $(this).text() == '+ Expand' ? '- Minimize' : '+ Expand';
$(this).text(txt);
$(toggle).slideToggle('fast', function() {
});
});
});
</script>
HTML
<!--Drop Down -->
<div>
<b class='bdrround'>
<b class='bdrround1'><b></b></b>
<b class='bdrround2'><b></b></b>
<b class='bdrround3'></b>
<b class='bdrround4'></b>
<b class='bdrround5'></b></b>
<div class='bdrroundfg'>
<table width='100%' class='pagehead'>
<tr>
<td width='80%' class='pagehead'>
<h2><a name='bureau'></a>Approved Bridging Statements (Optional):</h2>
</td>
<td width='20%' class='pagehead'>
<p align='right'><a href='#bridge' id="expand" class='expand'>+ Expand</a></p>
</td>
</tr>
</table>
<div id='bridge' class='faqcontainer' style='display:none;'>
<p>
<b>Operational Direction: </b>These should be used to bring the customer back into the conversation and
to transition into FAQs, Resolving Objections and overall general conversational flow.
These statements are designed to let the customer know that we are listening, that his/her opinion is
important and that we realize the value of that opinion.
</p>
<p>
<b>BRIDGING STATEMENTS:</b>
<ul>
<li>Now with that in mind …</li>
<li>That's an excellent question…</li>
<li>I hear what you are saying and…</li>
<li>I can (certainly) understand that and…</li>
<li>That's a very good point…</li>
<li>Please keep in mind…</li>
<li>I can understand your hesitation, but…</li>
<li>I can appreciate that…</li>
<li>Thank you </li>
<li>Perfect </li>
<li>Great </li>
<li>One moment please </li>
<li>Excellent</li>
<li>That’s great, now…</li>
<li>That’s correct</li>
<li>Let me clarify that for you</li>
</ul>
<span class="note">Note to Rep: </span>Use of Mr. or Ms. can be added throughout the call as appropriate
to help build rapport with the customer.
</p>
<p>
<span class="note">[Note to Rep: Ensure all service needs are satisfied before offering.]</span>
</p>
<p>
[<span class="note">Directional:</span> If during the servicing of the call the customer mentioned
they were retired, unemployed, or working less than 30 hours per week, go to:
<a href="#">PS Basic Counter Offer Transition</a>]
</p>
<p align='right'><a href="#bridge" id="A2" class='expand'>- Minimize</a></p>
</div>
<b class='bdrround'>
<b class='bdrround5'></b>
<b class='bdrround4'></b>
<b class='bdrround3'></b>
<b class='bdrround2'><b></b></b>
<b class='bdrround1'><b></b></b></b>
</div>
<div class='hrSectDiv'></div>
</div>
不要使用#some-id
href来切换元素,而是放在可重用的var
中,这是所有按钮的公共父级。
jsBin演示
-
将类
.slide_content
添加到所有可滑动元素(.faqcontainer
)(或者只使用.faqcontainer
而不是上面提到的,我不确定它是否是一个普通类) -
完成后,我们必须找到父元素的共同点:-按钮和-一个使用
.closest()
的可滑动内容。。。太棒了你有一个!是<div class='bdrroundfg'>
让我们在一个变量中使用他:var common_parent = $(this).closest('.bdrroundfg');
现在我们只需要让jQ检索那个元素——他的孩子按钮和他的可滑动内容:
var slide_content = common_parent.find('.slide_content'); // the added class!
var all_buttons = common_parent.find('a.expand'); // both buttons
点击时,我们需要切换我们的第一个(.eq(0)
)按钮的文本
var txt = $(this).text() === '+ Expand' ? '- Minimize' : '+ Expand';
all_buttons.eq(0).text(txt); // target only the first one in the collection
您的代码应该是这样的:
$(".expand").click(function(e) {
e.preventDefault();
var common_parent = $(this).closest('.bdrroundfg');
var slide_content = common_parent.find('.slide_content'); // the added class!
var all_buttons = common_parent.find('a.expand');
var txt = $(this).text() === '+ Expand' ? '- Minimize' : '+ Expand';
all_buttons.eq(0).text(txt); // toggle text - first button only!
$(slide_content).slideToggle('fast', function(){
// do something here...
});
});
试试这个:
if (this.id == 'A2') {
$('#expand').text("+ Expand")
}
演示
相关文章:
- 如何在已经有图标的滚动到顶部按钮中添加文本
- 滚动文本中的顶部单词
- 如何在引导程序中将输入文本框嵌入到图像的顶部
- 如何将文本置于拉斐尔路径的顶部
- 更改togglejquery顶部的文本
- 在自动重影文本区域中打字时,会将焦点集中在元素的顶部
- HTML5 中图像顶部的超链接文本
- 如何创建 HTML 文本框,该文本框顶部有一个水平菜单选项卡可供选择
- 如何停止幻灯片放映隐藏文本和图像跳到顶部,而下一张幻灯片进来
- HTML5 绘制位于顶部的文本
- 获取要从右侧而不是从顶部滑入的文本
- 如何防止在取消隐藏/隐藏文本后滚动到顶部
- 如何将剑道网格标题文本保持在顶部
- 在图像顶部显示文本
- 图像映射顶部的文本
- JavaScript 清除文本框 DOM 仅清除顶部框
- 如何通过jquery将滚动头文本加载到顶部固定标题区域
- 如何关注页面顶部的文本
- 如何将光标在文本区域中的位置设置回顶部
- Bootstrap 3 Modal内置texarea.当点击/聚焦文本区域时,背景滚动到顶部.仅适用于iOS 8