超链接到“隐藏"的链接. jQuery-Toggler中的内容(某个特定的#id) [英] Hyperlink to "hidden" content (a certain #id) inside a jQuery-Toggler

问题描述

我的问题是如何链接到 jQuery -"Toggler"内部的某个内容(例如某个id(ic:#link))，例如我在下面显示了一个:

 (function ($) {
    $(document).ready(function () {
        $(".toggler").click(function () {
            $(this).next().slideToggle("slow")
        }).next().hide();
    });
})(jQuery) 

 .toggler {
    color:orange;
    text-decoration:underline;
    margin-top:0px
}
.toggler:hover {
    color:orange;
    cursor:pointer;
    text-decoration:none
}
div#toggled {
    background-color:light-green
} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

</script>I would like to have <a href="#link">a link</a> here, with a destination inside the Toggler.
<br>
<br>
<hr>
<p class="toggler">Toggle here.</p>
<div id="toggled">Imagine I would like to have the <span id="link" style="color:red">link-destination <i>(id="link")</i></span> inside this Toggled content (the difficulty is successfully arriving here when the Toggler is closed).</div>
<hr> 

因此，仅当Toggler处于关闭/隐藏状态，然后链接无法到达任何地方时，问题才会出现.

为此，我需要一个自动打开Toggler的工具，因此需要一种检查链接是否首先出现在Toggler内部的方法.还是有解决这个问题的简便方法?

有人可以给我任何帮助吗?

---

在我的特定情况下，作为通用工具；能够使用多个这样的超链接和/或多个这样的Togglers可能很方便.

最好的方法是(自动查找链接目标和他的父级Toggler，以在查找大量链接和切换时节省手动工作，尤其是在 working 文档中).然后像.fadeIn("fast");一样自动打开该toggled.

解决方案

您可以在链接上单击以使用fadeIn()功能打开切换器，该链接将自动完成其工作.

JavaScript:

(function($){
    $(document).ready(function(){
        $(".toggler").click(function(){
          $(this).next().slideToggle("slow");
        }).next().hide();
        $(".togglerLink").click(function(){
           $(this).nextAll('.toggled:first').fadeIn("fast");
        });
    });
})(jQuery)

这是工作示例: https://jsfiddle.net/dk8uhh4y/1/

P.S.我已为链接赋予id，并在&之前在HTML中添加了更多内容. <span id="link"></span>之后才能正确描述场景.

My question is how to be able to link to a certain content (e.g. a certain id (i.c.: #link), that is inside a jQuery-"Toggler", like the one I have shown below:

(function ($) {
    $(document).ready(function () {
        $(".toggler").click(function () {
            $(this).next().slideToggle("slow")
        }).next().hide();
    });
})(jQuery)

.toggler {
    color:orange;
    text-decoration:underline;
    margin-top:0px
}
.toggler:hover {
    color:orange;
    cursor:pointer;
    text-decoration:none
}
div#toggled {
    background-color:light-green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

</script>I would like to have <a href="#link">a link</a> here, with a destination inside the Toggler.
<br>
<br>
<hr>
<p class="toggler">Toggle here.</p>
<div id="toggled">Imagine I would like to have the <span id="link" style="color:red">link-destination <i>(id="link")</i></span> inside this Toggled content (the difficulty is successfully arriving here when the Toggler is closed).</div>
<hr>

So, the problem arises only when the Toggler is closed/hidden, then the link can not arrive anywhere.

What would be needed for this is an automatic opener for the Toggler I guess, so some way of checking whether the link occurs inside the Toggler first. Or is there perhaps a much easier way around this?

Would someone give me any help on how to go about this?

---

Edit: In my specific case, and as a general utility; it might be handy to be able to work with multiple such hyperlinks and/or multiple such Togglers.

What would be the best (to save manual work when having tons of links and toggles, especially in a working document), is to automatically look up the link-destination and his parent Toggler, and then automatically open that toggled, as with .fadeIn("fast");.

解决方案

You can use fadeIn() function on click on the link to open up the toggler and the link will automatically do its job.

JavaScript:

(function($){
    $(document).ready(function(){
        $(".toggler").click(function(){
          $(this).next().slideToggle("slow");
        }).next().hide();
        $(".togglerLink").click(function(){
           $(this).nextAll('.toggled:first').fadeIn("fast");
        });
    });
})(jQuery)

Here's the working example: https://jsfiddle.net/dk8uhh4y/1/

P.S. I have given an id to the link and added more content in the HTML before & after the <span id="link"></span> to properly depict the scenario.

这篇关于超链接到“隐藏"的链接. jQuery-Toggler中的内容(某个特定的#id)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！