Question

网站信息：

PHP 5.5
的Javascript
Jquery 1.11.3
自举

我有一个目前不发达的网格系统，我遇到了jquery .slideToggle函数的问题。我是jQuery的新手，所以我确信我做错了但可以使用一些帮助。

我想要做的是当网格悬停或点击时，会有一个对话框滑入视图。我需要这个在桌面和移动设备上工作。

目前，我已经使用jQuery的.slideToggle功能来使用悬停功能，但是当我使用相同的ID和类名称在辅助网格条目上重复该功能时，它打开两个对话框时应该只打开一个。我如何做到这一点，它只打开一个对话框关联到被选中的网格，而不是所有使用相同的ID？

我的功能如下：

<script>
$(document).ready(function(){
   $("#slide-down").hover(function(){
    $(".slide-down").slideToggle("fast");
});

$("#slide-down").click(function(){
    $(".slide-down").slideToggle("fast");
});

$("#slide-up").hover(function(){
    $(".slide-up").slideToggle("fast");
});

$("#slide-left").hover(function(){
    $(".slide-left").slideToggle("fast");
});

$("#slide-right").hover(function(){
    $(".slide-right").slideToggle("fast");
});

});
</script>

您可以在http://web.oru.edu/dev/new-oru/grid-layouts-1.php

看到相关页面

网格代码：

<div class="vgrid col-xs-12 vset">
     <div class="grid-section" id="grid-content">
        <div id="v-slide" class="vgrid-block vgrid29">
            <div class="slide-down sl_blue_bg">
                <h1>Headline</h1>
                <p>text goes here. <a href="#">Click Here</a></p>
            </div>
            <a href="#" id="slide-down" >
                <img src="images/img-7.png" width="489" height="322" alt="img"/>
                <span>office of the President</span>
            </a>
        </div>

    </div>
</div>

Answer 1

您应该只使用唯一ID。使用类或其他一些css选择器将常用功能应用于元素组。如果触发器是网格框的父级，则可以使用以下内容：

$('.slide-down-trigger').hover(function() {
  $(this).children('.slide-down').slideToggle('fast');
});

仅选择相关网格。或者，您可以尝试使用jQuery内置的closest方法，该方法仅针对触发器的最近元素。

$('.slide-down-trigger').hover(function() {
  $(this).closest('.slide-down').slideToggle('fast');
});

修改

根据OP的进一步信息，要定位前一个元素，您应该使用.prev()方法。

例如

HTML

<div class="slide-down"></div>
<a href="#" class="slide-down-trigger">Trigger</a>

JS

$('.slide-down-trigger').hover(function() { $(this).prev('.slide-down').slideToggle('fast'); });

Answer 2

如果我从this link about jQuery's hover

正确理解

您的代码应该是

$("#slide-right").hover(function(){
    $(this).slideToggle("fast"); 
});

选择＆＃34; .slide-right＆＃34;选择与.slide-right匹配的所有内容，而选择此选项仅选择从。

触发的元素悬停

Jquery冲突使用相似的标签

2 个答案: