Форум

DEVIL · #1 (**permalink**) 09.09.2018, 14:26

Использую скрыть/открыть див

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
 $(".hider").click(function(){
 $("#hidden").slideToggle("slow");
 return false;
 });
});
// ]]>
</script>

<div class='first_block'>
 <a href=""><img src="/img/logos/farm.png"></a>
 <div class='second_block'>
<a class="hider"> Farming Simulator 2017 моды &#9776;</a>
 </div>
</div> 
 <div id="hidden" style="display: none;position: absolute;margin-top: 12%;margin-left: 2%;width: 86%;">
 $MYINF_1$
 </div>

Как собственно реализовать.
Пробовал, вместо закрытия вылазит другой блок.

j0hnik · #2 (**permalink**) 09.09.2018, 14:57

Сообщение от DEVIL

Скрытие дива при клике вне его.

<div id="block" style="width: 30px; background-color: red;">123</div>
<script>
onclick = e => {
	if(e.target !== block)  block.style.display = 'none';
};
</script>

рони · #3 (**permalink**) 09.09.2018, 15:30

DEVIL,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">  #hidden{
      background-color: #FF00FF
  }

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

  <script>
$(function() {
    $(document).click(function(event) {
        var target = $(event.target),
            method = "slideUp";
        if (target.is(".hider")) {
            event.preventDefault();
            method = "slideToggle"
        }
        if (target.closest("#hidden").length) return;
        $("#hidden")[method]("slow")
    })
});
  </script>
</head>

<body> test
<div class='first_block'>
 <a href=""><img src="/img/logos/farm.png"></a>
 <div class='second_block'>
<a class="hider"> Farming Simulator 2017 моды ☰</a>
 </div>
</div>
 <div id="hidden" style="display: none;position: absolute;margin-top: 12%;margin-left: 2%;width: 86%;">
 $MYINF_1$
 </div>

</body>
</html>

DEVIL · #4 (**permalink**) 09.09.2018, 17:47

Сколько можно таким образом прописать сворачивающийся дивов?

<script type="text/javascript">
    
    // <![CDATA[
$(function() {
 $(document).click(function(event) {
 var target = $(event.target),
 method = "slideUp";
 if (target.is(".hider")) {
 event.preventDefault();
 method = "slideToggle"
 }
 if (target.closest("#hidden").length) return;
 $("#hidden")[method]("slow")
 })
});

// ]]>

 
 // <![CDATA[
$(function() {
 $(document).click(function(event) {
 var target = $(event.target),
 method = "slideUp";
 if (target.is(".hider2")) {
 event.preventDefault();
 method = "slideToggle"
 }
 if (target.closest("#hidden2").length) return;
 $("#hidden2")[method]("slow")
 })
});
// ]]>


 // <![CDATA[
$(function() {
 $(document).click(function(event) {
 var target = $(event.target),
 method = "slideUp";
 if (target.is(".hider3")) {
 event.preventDefault();
 method = "slideToggle"
 }
 if (target.closest("#hidden3").length) return;
 $("#hidden3")[method]("slow")
 })
});
// ]]>
 // <![CDATA[
$(function() {
 $(document).click(function(event) {
 var target = $(event.target),
 method = "slideUp";
 if (target.is(".hider4")) {
 event.preventDefault();
 method = "slideToggle"
 }
 if (target.closest("#hidden4").length) return;
 $("#hidden4")[method]("slow")
 })
});
// ]]>
 // <![CDATA[
$(function() {
 $(document).click(function(event) {
 var target = $(event.target),
 method = "slideUp";
 if (target.is(".hider5")) {
 event.preventDefault();
 method = "slideToggle"
 }
 if (target.closest("#hidden5").length) return;
 $("#hidden5")[method]("slow")
 })
});
// ]]>
 // <![CDATA[
$(function() {
 $(document).click(function(event) {
 var target = $(event.target),
 method = "slideUp";
 if (target.is(".hider6")) {
 event.preventDefault();
 method = "slideToggle"
 }
 if (target.closest("#hidden6").length) return;
 $("#hidden6")[method]("slow")
 })
});
// ]]>
 // <![CDATA[
$(function() {
 $(document).click(function(event) {
 var target = $(event.target),
 method = "slideUp";
 if (target.is(".hider7")) {
 event.preventDefault();
 method = "slideToggle"
 }
 if (target.closest("#hidden7").length) return;
 $("#hidden7")[method]("slow")
 })
});
// ]]>
 
 // <![CDATA[
$(function() {
 $(document).click(function(event) {
 var target = $(event.target),
 method = "slideUp";
 if (target.is(".hider8")) {
 event.preventDefault();
 method = "slideToggle"
 }
 if (target.closest("#hidden8").length) return;
 $("#hidden8")[method]("slow")
 })
});
// ]]>
 
 // <![CDATA[
$(function() {
 $(document).click(function(event) {
 var target = $(event.target),
 method = "slideUp";
 if (target.is(".hider9")) {
 event.preventDefault();
 method = "slideToggle"
 }
 if (target.closest("#hidden9").length) return;
 $("#hidden9")[method]("slow")
 })
});
// ]]>
 // <![CDATA[
$(function() {
 $(document).click(function(event) {
 var target = $(event.target),
 method = "slideUp";
 if (target.is(".hider10")) {
 event.preventDefault();
 method = "slideToggle"
 }
 if (target.closest("#hidden10").length) return;
 $("#hidden10")[method]("slow")
 })
});
// ]]>
 </script>

<aside><h1><a href="$HOME_PAGE_LINK$"> Ты не ты - когда играешь без модов!</a></h1>
 <p>
 <i><a href="/blog/">Новости</a></i> 
 <a class="hider10"><img src="/img/mail.png" class="mail"></a> 
 <?if($USER_LOGGED_IN$)?>

<img src="/img/notice.png" class="mail"> 
 <i>
 <a class="hider9">$USERNAME$ <img src="/img/arrow.png" class="arrow"></a></i> 
 <?else?> <i><a href="$LOGIN_LINK$">Вход или регистрация</a></i><?endif?>
 <i>
 <form class="poick_os" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" > 
 <input></input> <button type="submit">поиск</button>
 </form>
 </i>
 
 </p>

 
</aside>
 <div id="hidden9" style="display:none;position: absolute;margin-top: 3.8%;right: 18%;margin-right: 2%;width: 10%;padding-top: 1%;padding-bottom: 1%;">
 <a href="/index/8">Профиль</a>
 </div> 
<div id="hidden10" style="display:none;position: absolute;margin-top: 5%;margin-left: 2%;width: 90%;right: 6%;padding:0%;">
 <iframe src="/index/14-0-0" width="100%" height="auto" class="pm" align="left"></iframe>
 </div>
 <main>
 <span>
 
<div class='first_block'>
 <a href=""><img src="/img/logos/farm.png"></a>
 <div class='second_block'>
<a class="hider"> Farming Simulator 2017 моды &#9776;</a>
 </div>
</div> 
 <div id="hidden" style="display: none;position: absolute;margin-top: 12%;margin-left: 2%;width: 86%;">
 $MYINF_1$
 </div>
 

<div class='first_block'>
 <a href=""><img src="/img/logos/mudrun.png"></a>
 <div class='second_block' style="">
 <a class="hider2">Mudrunner моды &#9776;</a> 
 </div>
</div>
 <div id="hidden2" style="display: none;position: absolute;margin-top: 12%;margin-left: 2%;width: 86%;">2
 </div>
<div class='first_block'>
 <a href=""> <img src="/img/logos/amtruck.png"></a>
 <div class='second_block' style="">
 <a class="hider3"> American Truck Sim. моды &#9776;</a> 
 </div>
</div>
 <div id="hidden3" style="display: none;position: absolute;margin-top: 12%;margin-left: 2%;width: 86%;">3</div>
 <div class='first_block'>
 <a href=""><img src="/img/logos/purefarm.png"></a>
 <div class='second_block' style="">
 <a class="hider4">Pure Farming 2018 моды &#9776;</a> 
 </div>
</div>
 <div id="hidden4" style="display: none;position: absolute;margin-top: 12%;margin-left: 2%;width: 86%;">4
 </div>
 
 
<div class='first_block'>
 <a href=""> <img src="/img/logos/wreack.png"></a>
 <div class='second_block' color="">
 <a class="hider5">Wreckfest моды &#9776;</a> 
 </div>
</div>
 <div id="hidden5" style="display: none;position: absolute;margin-top: 12%;margin-left: 2%;width: 86%;">5
 </div>
 
<div class='first_block'>
 <a href=""> <img src="/img/logos/eurotrk2.png"></a>
 <div class='second_block' style="">

 <a class="hider6"> Euro Truck Simulator 2 моды &#9776;</a> 
 </div>
</div>
 <div id="hidden6" style="display: none;position: absolute;margin-top: 24%;margin-left: 2%;width: 86%;">6
 </div>
 

<div class='first_block'>
 <a href=""> <img src="/img/logos/castle.png"></a>
 <div class='second_block' style="">
 <a class="hider7">Cattle and Crops моды &#9776;</a> 
 </div>
</div>
 <div id="hidden7" style="display: none;position: absolute;margin-top: 24%;margin-left: 2%;width: 86%;">7
 </div>
 

<div class='first_block'>
 <a href=""> <img src="/img/logos/dirty.png"> </a>
 <div class='second_block' style="">
 <a class="hider8"> DiRT Rally моды &#9776;</a> 
 </div>
</div>
 <div id="hidden8" style="display: none;position: absolute;margin-top: 24%;margin-left: 2%;width: 86%;">8
 </div>
 </span>
</div>

.hider10 не срабатывает
Демо на сайте http://modfixfullver.ucoz.net

рони · #5 (**permalink**) 09.09.2018, 18:05

Сообщение от DEVIL

Сколько можно таким образом прописать сворачивающийся дивов?

достаточно 1 таблетки!!!

рони · #6 (**permalink**) 09.09.2018, 18:37

DEVIL,

Пример: открывашка

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    .hidden{

            background-color: #FF00FF;
            display: none;position: absolute;
            margin-top: 12%;
            margin-left: 2%;
            width: 86%;
    }

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

    <script>
$(function() {
        var btn = $(".hider"), block = $(".hidden");

        $(document).click(function(event) {
                var target = $(event.target),cur;
                if (target.is(".hider")) {
                       event.preventDefault();
                       var index = btn.index(target);
                       cur = block.eq(index).slideToggle();
                 }
                if (target.closest(".hidden").length) return;
                block.not(cur).slideUp("slow");
        })
});
    </script>
</head>

<body>
<div class='first_block'>
 <a href=""><img src="/img/logos/farm.png"></a>
 <div class='second_block'>
 <a class="hider"> Farming Simulator 2017 моды ☰</a>
 </div>
</div>
 <div class="hidden" >
 $MYINF_1$
 </div>
<div class='first_block'>
 <a href=""> <img src="/img/logos/wreack.png"></a>
 <div class='second_block' color="">
 <a class="hider">Wreckfest моды ☰</a>
 </div>
</div>
 <div class="hidden">5
 </div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript