Добавить элемент в div, а затем снаружи после кликов
Я пытаюсь сделать некоторый код и заменить некоторые позиции кнопок, потому что на рабочем столе я использую встроенную позицию, а на мобильном я не хочу. Вот почему я помещаю свою кнопку перед скрытым текстом, но когда я на мобильном устройстве, мне нужна кнопка после скрытого текста, поэтому я использую для этого prepend():
HTML:
<a class = "btn active" data-target"#info-text" data-toggle = "collapse">button</a>
<div class = "collapse info-text">
<p>texttexttext</p>
<b>{{I want it here after click one and after click two, to his original position}}</b>
</div>
<b>{{Or here, I don't know what's easier}}</b>
jQuery:
$(".btn").click(function () {
var windowSize = $(window).width();
if (windowSize <= 600 && $(this).hasClass("active")) {
$(this).next($(".hiddenText")).append($(this));
}
else if (windowSize <= 600 && !$(this).hasClass("active")) {
$(this).next($(".hiddenText")).prepend($(this));
}
})
append() работает правильно (кнопка внизу внутри div), но после второго клика я хочу, чтобы она была вне div. В противном случае он рухнет, и кнопки больше не будет видно. Или есть лучший способ заменить позицию тега на позицию div? Сообщений может быть несколько, поэтому я использую следующее свойство.
О, извините и спасибо. В следующий раз я сделаю это лучше. Это первый раз, когда я использую это для вопроса.
Ответы 1
Чтобы отменить действие «перемещения» элемента... Вы должны принять во внимание его новую позицию в DOM, чтобы переместить его снова.
Таким образом, чтобы вернуть .next().append() есть .parent().before().
Также переключите класс active!
$(".btn").click(function () {
var windowSize = $(window).width();
if (windowSize <= 600 && $(this).hasClass("active")) {
$(this).next(".info-text").append($(this).toggleClass("active"));
}
else if (windowSize <= 600 && !$(this).hasClass("active")) {
$(this).parent(".info-text").before($(this).toggleClass("active"));
}
// Just for this demo
if (windowSize > 600){
console.info("Resize the window to less than 600px to run me...")
}
})#info-text{
border: 1px solid red; /* Just for this demo */
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel = "stylesheet"/>
<a class = "btn active" data-target = "#info-text" data-toggle = "collapse">button</a>
<div id = "info-text" class = "collapse info-text">
<p>texttexttext</p>
</div>Привет, Луис, спасибо, это работает. Может быть, это был глупый вопрос, но я не знаком с родительским действием. Ты сделал мой день :)
Большой! :) Можете ли вы пометить ответ как принятый? (зеленая галочка)
Я отредактировал ваш код... Посмотрите как редактировать вопросы.