Question

我确信这是一个非常简单的答案，但我一直在努力让这件事发挥作用。

我要做的是在某些文本框上创建一个了解更多按钮。当您点击了解更多信息时，该框应向下展开并显示更多信息。

我遇到麻烦的地方实际上是让学习更多点击功能对应于它旁边的特定文本框...它正在扩展所有文本框而不是我想要的特定文本框。

还有一个功能可以用颜色插件为背景设置动画..我已经有了这个功能..只是针对特定的盒子让我发疯。

我可以将click函数添加到.bind，但我不能用它来定位任何东西。

$(document).ready(function(){
    var service = $(".service"), text = $(".service-text, h1.service-heading"); 

    $('.learn').bind({
    mouseenter: function() {
            $(service).animate({ backgroundColor: "#000000", }, 800);
            $(text).animate({ color: "#FFFFFF", }, 800);
        },
    mouseleave: function() {
            $(service).animate({ backgroundColor: "#FFFFFF", }, 800);
            $(text).animate({ color: "#000000", }, 800);
        }
    });
});

更新：

以下是我正在使用的HTML

<div class="service box-round">
<h1 class="service-heading">WEB DEVELOPMENT</h1>
    <div class="service-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<span class="more-info">...Click for more info</span></div>
    <div class="more-text">More Text</div>
</div>
            <div class="learn"><span class="more">learn more</span><span class="less">learn less</span></div>

我的想法是使用隐藏和显示功能来学习更多知识并减少学习。

Answer 1

您可以尝试让“了解更多”按钮链接到以特定div为目标的哈希引用，然后使用jQuery插件拦截调用并展开目标div。

一个例子就是有一个div：

<div id="example-using-vars">
    <h3>Using Variables in ...</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

然后使用类似

的超链接触发它

<a href="#example-using-vars">Learn more</a>

Answer 2

$('.learn').bind({
mouseenter: function() {
            $(service).animate({ backgroundColor: "#000000", }, 800);
            $(text).animate({ color: "#FFFFFF", }, 800);
},
mouseleave: function() {
            $(service).animate({ backgroundColor: "#FFFFFF", }, 800);
            $(text).animate({ color: "#000000", }, 800);
}  
});

这部分可以改为：

$('.learn').hover(function() {
    service.css({ backgroundColor: "#000000" });
    text.css({ color: "#FFFFFF" });
}, function() {
    service.css({ backgroundColor: "#000"});
    text.css({ color: "#FFFFFF" });
});

为什么我没有使用animate - 因为没有插件的jQuery无法为背景设置动画并输入文本颜色

更新

我不知道这是不是你要找的，但是：http://jsfiddle.net/DJLZC/7/

Answer 3

$(document).ready(function(){
    $service = $(".service");
    $text = $(".service-text, h1.service-heading"); 

    $('.learn').bind({
    mouseenter: function() {
            $($service).animate({ backgroundColor: "#000000", }, 800);
            $($text).animate({ color: "#FFFFFF", }, 800);
        },
    mouseleave: function() {
            $($service).animate({ backgroundColor: "#FFFFFF", }, 800);
            $($text).animate({ color: "#000000", }, 800);
        }
    });
});

Answer 4

仅基于您的描述而不是基于提供的代码，这就是我之前实现“显示更多”链接以展开/显示文本区域的方式。这应该为您提供关于如何定位特定<div>而不是所有{。}}的概念。

<强> HTML

<div class="details">
  Name: John Doe<br>
  Address: 123 Test Drive, Testville
  Postal Code: A1A 1A1
</div>
<a class="detailLink" href="#">Show/Hide Details...</a>

<强>的jQuery

$(function() {  
    $('.detailLink').click(function() {
        $(this).prev('.details').toggle('medium');
        return false;
    });
 });

因此，我们的想法是使用实际的“了解更多”链接作为您的启动点，然后使用jQuery的树遍历功能来切换前一个详细信息<div>的可见性。

在jQuery中定位特定的div

4 个答案: