时间戳

首页 > 解决方案 > 单击链接应关闭模式并激活 JavaScript 以在 div 中保存的隐藏内容部分之间切换

javascript - 单击链接应关闭模式并激活 JavaScript 以在 div 中保存的隐藏内容部分之间切换

问题描述

在过去的几天里，我一直在尝试使某些东西起作用，并且似乎无法通过搜索找到解决方案。我找到了解决部分问题的方法，效果很好。但是，每次我尝试解释问题的最后一部分时，我似乎都找不到合适的词，所以希望我在这里解释得很好。

codepen.io 示例不是我的，它只包含我用于解决问题的部分修复程序。

请参阅此页面了解我目前遇到的问题。

基本上，每个主要问题都有一组子问题。当点击这些主要问题之一时，它会激活一些隐藏原始内容的 JavaScript，并显示一些新内容。这发生在所有 3 个主要问题上，并揭示了子问题。子问题在模态窗口中打开。其中一些子问题与其他子问题相关，因此在模态窗口中具有链接以切换到相关的其他子问题模态窗口。

我已经为同一主问题部分中的所有子问题工作，但一些子问题在其他 2 个主要问题部分之一中具有相关答案。（希望任何阅读本文的人仍在关注。）

如何在模式窗口中获取链接以打开位于同一页面中但在该页面的隐藏部分中的新模式窗口？

我意识到这有点难以解释，所以我会试着引导你解决这个问题，这样你就可以亲眼看到我想要实现的目标：

为稍微混乱的解释道歉。请随时向我询问更多详细信息。

编辑1：要求提供更多详细信息，并发布一些代码。非常感谢：

请参阅以下内容，关于模态的制作方法，总共有 23 个模态，分为 3 个部分。模态页脚中的按钮是目前无法正常工作的东西。如果链接指向同一集合中的子问题，它可以正常工作，但如果它指向另一个集合，它会关闭模式，然后什么也不会发生：

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<ul class="nav nav-fill nav-pills">
<li class="nav-item">
<a class="nav-link subQSciCha button" data-target="#myModal15" data-toggle="modal">C:1. What are the fundamental particles and fields?</a>
</li>
</ul>
</div>

<div class="fade modal" id="myModal15" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header"><button class="close" data-dismiss="modal" type="button">&times;</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<p>Stuff...</p>
</div>
</div>
<div class="modal-footer"><button class="btn btn-default" data-dismiss="modal" data-target="#myModal16" data-toggle="modal" type="button">Answer C:2.</button><button class="btn btn-default" data-dismiss="modal" data-target="#myModal18" data-toggle="modal" type="button">Answer C:4.</button><button class="btn btn-default" data-dismiss="modal" type="button">Close</button></div>
</div>
</div>
</div>

现在是 JavaScript（这是所有的 JavaScript，其中一些与模式无关，但以防万一它妨碍了）：

// Hides the sub questions and switch menu on page load if no anchor link is used
// If anchor link is used, challenges will hide and selected question and menu will display
window.onload = function() {

// Retrieves URL # and splits into 2 IDs which are used to display relevant questions/menu
var $idNme = location.hash;
var $idNmeSplit = $idNme.split('/');
var $idQ = $idNmeSplit[0];
var $idM = "#" + $idNmeSplit[1];

if(!$idNme){
    hideAnswers()
    hideSubQuestions()
} else {
    hideAnswers()
    hideSubQuestions()
    $("#sciChallenges").children().hide();
    $($idQ).show();
    $($idM).show();
}
}

// Hides the sub questions and switch menu
function hideSubQuestions(){
$("#subQuestions").children().hide();
$("#switchMenu").children().hide();
}
// Shows the sub questions for the selected question and switch menu with a fade in set to 1 second
function showSubQuestions(i,m) {
hideAnswers();
$("#intro").hide();
$("#sciChallenges").children().hide();
$("#subQuestions").children().fadeIn(1000).hide();
$(i).show();
$("#switchMenu").children().fadeIn(1000).hide();
$(m).fadeIn(1000).show();
}
// Shows the 4 main questions when 'All Challenges' is selected
function showSciChallenges() {
hideSubQuestions();
hideAnswers();
$("#intro").fadeIn(1000).show();
$("#sciChallenges").children().fadeIn(1000).show();
}
// Hides the answers to all questions
function hideAnswers() {
$("#answersA, #answersB, #answersC").children().hide();
}
// Shows the answer to selected question
function showAnswers(a) {
$("#answersA, #answersB, #answersC").children().hide();
$(a).fadeIn(1000).show();
}

如果您需要查看更多信息，请告诉我。

标签： javascriptjqueryhtmlcss

解决方案

尝试将所有模态 div 直接移动到 body 标记之后。由于模态框在您调用它们之前是隐藏的，因此它们不需要位于可能隐藏的其他 div 中。

<body>
<div class="fade modal" id="myModal1" role="dialog" style="display: none;" aria-hidden="true"></div>
<div class="fade modal" id="myModal2" role="dialog" style="display: none;" aria-hidden="true"></div>
<div class="fade modal" id="myModal..." role="dialog" style="display: none;" aria-hidden="true"></div>

<div class="container">
**the rest of your content
</div>

</body>

然后您可以从任何其他模态中调用任何模态：

<button class="btn btn-default" data-dismiss="modal" data-target="#myModal7" data-toggle="modal" type="button">Answer A:7.</button>

推荐阅读