Question

我想制作一些（让他们说2）链接，这些链接将通过向上滑动触发特定的显示，然后是另一个通过向下滑动触发特定的链接。

链接是由某个应用程序动态生成的（类似于我个人不理解的循环）

在本网站上进行研究后，我尝试了以下代码，但发现了一些问题：

只有滑动的第一个链接运行良好，其他蓝色链接无法正常工作
当前脚本在蓝色链接上的每次点击内容上下滑动内容。我无法弄清楚如何拆分脚本，因此我只能为蓝色链接应用滑动脚本，为红色链接应用滑动脚本。
需要注意的是，蓝色链接是根据某个应用程序循环动态生成的，因此实际上没有显示蓝色链接数量的修正号。

这是代码：

＆＃13;

   $(function(){
    var list = $('#slidingcontent'),
        button = $('#triggerup'),
        speed = 500;
    
    list.hide().css('bottom', button.css('top'))
        .css('margin-top', list.outerHeight() * -1);
                    
    button.toggle(function(e) {
        e.preventDefault();
        e.stopPropagation();
        list.slideDown(speed);
    },function(e){
        e.preventDefault();
        e.stopPropagation();
        list.slideUp(speed);
    });
});

＆＃13;

#slidingcontent{
    position:absolute;
}
.linkcontainer{
    text-align:center;
}
.sliding_up_link a, .sliding_down_link a, #slidingcontent{
    color:white;
    margin: 1px;
    padding: 1px; 
    text-decoration:none;
    font-weight:bold;
}
.sliding_up_link a{
    background:blue;
}
.sliding_down_link a{
    background:red;
}
#slidingcontent{
    background:green;
}

＆＃13;

<body>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    
  
    
    
    <div class= "linkcontainer">

    <span class="sliding_up_link" id="triggerup" >
        <a href ="#">
            triggerup1 (for sliding upward)</br>
                        the amount of links(for triggering content to slide up) is uncertain based on conditions (it maybe only 1 link, or 3 links like this, or 7 links, or 15 links, etc)
        </a>
    </span>

</div>   


    <div class= "linkcontainer">

    <span class="sliding_up_link" id="triggerup" >
        <a href ="#">
            triggerup2 (for sliding upward)</br>
            the amount of links(for triggering content to slide up) is uncertain based on conditions (it maybe only 1 link, or 3 links like this, or 7 links, or 15 links, etc)
        </a>
    </span>

</div>   

<div class= "linkcontainer">

    <span class="sliding_down_link" id="triggerdown" >
        <a href ="#">
            triggerdown (for sliding down)</br>
            only one link (for triggering content to slide down) will be displayed 
        </a>
    </span>

</div>  

<div id="slidingcontent">
content here
</div>
</body>

＆＃13;

感谢您的帮助：）

Answer 1

这对我有用。我也纠正了代码中的HTML验证错误。

jQuery(function ($) {
    $(document).ready(function() {
      $("#slidingcontent").css({"display": "none", "opacity": "1"});
    });
        
    $(window).load(function () {
        var speed = 500,
            target = $("#slidingcontent");
        $(".sliding_up").on("click", function () {
            target.slideDown(speed);
        });
        $(".sliding_down").on("click", function () {
            target.slideUp(speed);
        });
    });
});

#slidingcontent {
    position:absolute;
    bottom: -2px;
    opacity: 0;
    padding: 0!important;
}
.linkcontainer {
    text-align:center;
}
p.sliding_up, p.sliding_down, #slidingcontent {
    color:white;
    margin: 1px;
    text-decoration:none;
    font-weight:bold;
}
p.sliding_up, p.sliding_down {
    cursor: pointer;
    display:inline-block;
}
p.sliding_up {
    background:blue;
}
p.sliding_down {
    background:red;
}
#slidingcontent {
    background:green;
}
.wrap {
    overflow-y: hidden;
    position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
    <div class="linkcontainer">
        <p class="sliding_up">trigger up 1 (for sliding upward)</p>
    </div>
    <div class="linkcontainer">
        <p class="sliding_up">trigger up 2 (for sliding upward)</p>
    </div>
    <div class="linkcontainer">
        <p class="sliding_down">triggerdown (for sliding down)</p>
    </div>
    <div id="slidingcontent">content here</div>
</div>

触发某个<div>向上滑动的链接和用于触发<div>向下滑动的链接</div> </div>

1 个答案: