Javascript切换小问题

时间:2013-05-25 23:46:45

标签: jquery toggle

因此,对于我发现的这个脚本,我正在尝试根据我的需要定制它。

我使用它作为我的html:

<a>What is anewall?</a>
<p class="toggle">anewall reponsitionable matte fabric is made from a 7mm polyester fabric      with an acrylic, removable, pressure sensitive adhesive. This adhesive fabric provides as an excellent material for removing, repositioning, and reusing graphics on most wall surfaces. This adhesive fabric shows off an impressive texture, showing quality, while at the same time maintaining the functional removability feature. Keep the adhesive backing free of dust, fibers, and dirt to extent the life span of this product.</p>

使用这个jQuery:

<script type="text/javascript">
// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Show';
var hideText='Hide';

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of      "toggle"
$('.toggle').prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)<br />');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// switch visibility
is_visible = !is_visible;

// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});
</script>

它适用于jsFiddle,如此处所示。

http://jsfiddle.net/nfCCh/

但是我网站上的这些大块文字几乎都是“打嗝”。

这里可以看到这里使用用户名“stack”和密码“overflow”。

http://anewall.com/content/11-faq

我真的很感激一些帮助,因为我有点,好吧,一个巨大的jQuery newb。 :)

谢谢,

卡尔

1 个答案:

答案 0 :(得分:0)

您可以通过对段落应用固定宽度来解决问题,而不是依靠div.justifiedcustom来约束比例。然后,JS / jQuery应该能够更好地计算和同步显示过程。

'打嗝'实际上是段落扩展,直到它不能更宽,然后突然显示剩余的内容。只需在主演示中添加一个包含div的方法,就可以在您的小提琴中复制相同的“打嗝”。 http://jsfiddle.net/nfCCh/1/