结合scrollto和show

Question

我们使用scrollto。

代码：JS

$(document).ready(function() {
    $("a.anchorLink").anchorAnimate()
});

jQuery.fn.anchorAnimate = function(settings) {

    settings = jQuery.extend({
        speed : 1100
    }, settings);   

    return this.each(function(){
        var caller = this
        $(caller).click(function (event) {  
            event.preventDefault()
            var locationHref = window.location.href
            var elementClick = $(caller).attr("href")

            var destination = $(elementClick).offset().top;
            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
                window.location.hash = elementClick
            });
            return false;
        })
    })
}

代码：HTML

<a href="#myAnchor" rel="" id="anchor1" class="anchorLink">Add a Comment</a>

滚动到目的地：

<a name="myAnchor" id="myAnchor">Play Nicely</a>

我们还使用show / hide onclick：

代码：HTML

<a class="nag-details" href="javascript:;">Conditions Apply* &#x25BC;</a>

目的地：HTML

<div id="closeable-nag" style="display:none">
<p>some stuff here</p>
</div>

代码：JS

jQuery(".nag-details").click(function() {
    jQuery("#closeable-nag").slideToggle(function() {
        if (jQuery(this).is(":visible")) {
            jQuery(".nag-details").text("Conditions Apply* \u25b2");
        } else {
            jQuery(".nag-details").text("Conditions Apply* \u25bc");
        }
    });
});

好的，这是我的问题。

onclick myanchor链接，我想滚动并打开closeable-nag（并显示div包含“某些东西在这里”

这可以吗？

如果需要，我可以设置2个小提琴。

基本上，这两项工作是独立的。所以我可以单击锚点，页面滚动到dest。元件。 我也可以点击dest。元素和SHOW上滑动隐藏内容，并关闭内容。

我本质上是，要做的是组合滚动页面和OPEN隐藏元素（即显示）

任何建议请。

Answer 1

你走了！ ：

DEMO FIDDLE

代码：

$(document).ready(function() {

    $("a.anchorLink").anchorAnimate();

 // CRETE A FUNCTION 'cond' like 'condition'   
    function cond(){
        $("#closeable-nag").slideToggle(function() {
            if ($(this).is(":visible") ) {
                $(".nag-details").text("Conditions Apply* \u25b2");
            } else {
                $(".nag-details").text("Conditions Apply* \u25bc");
            }
        });
    }

    $('#anchor1').click(function(){
        cond();   ///////////// run it on anchor click...
    });  

    $(".nag-details").click(function() {
        cond();    //////////// and on him-self!
    });   

});

---

DEMO without the 'scrollTo' plugin

// CREATE A FUNCTION 'slide' ...like... SLIDE! .D
function slide(){
    var condPos = $('.nag-details').position().top;    
    $('html, body').animate({ scrollTop: condPos }, 2000);
    return false;
}

// CRETE A FUNCTION 'cond' like 'condition'   
function cond() {
    $("#closeable-nag").slideToggle(function() {
        if ($(this).is(":visible")) {
            $(".nag-details").text("Conditions Apply* \u25b2");
        } else {
            $(".nag-details").text("Conditions Apply* \u25bc");
        }
    });
}

$('#anchor1').click(function() {
    cond();  // Run the condition
    slide(); // and SLIDEEEEE! :)
});
$(".nag-details").click(function() {
    cond(); //// run just the condition!
});

---

这是使用三元运算符的条带化代码：

shortened DEMO with ternary operators (and without the plugin)

var nag = $(".nag-details"),
    t1 = nag.text("Conditions Apply* \u25b2"),
    t2 = nag.text("Conditions Apply* \u25bc");                  
function s(){
    var cPos = $('.nag-details').position().top;    
    $('html, body').animate({scrollTop:cPos}, 2000);
}
function c() {
    $("#closeable-nag").slideToggle(function() {        
        ( $(this).is(":visible") ) ? (t1) : (t2);
    });
}
$('#anchor1').click(function() {
   c();
   s();
});
$(".nag-details").click(function(){
   c();
});