Как изменить css тега из внешней ссылки

Ответ 1

• Для этого можно использовать тип ввода = 'checkbox':

http://jsfiddle.net/gSPqX/1/

<input type="checkbox" style="display: none" id="cb">
<label for="cb">Click Here</label>
<div>
    Hello. This is some stuff.
</div>

2. Еще одно лучшее решение с использованием :target

#menu .menu{
   display:none; 
}
#menu:target  .menu{
    display: block;
}

#menu:target .menu__open{
    display: none;
}
#menu .menu__close{
    display: none;
}
#menu:target .menu__close{
    display: block;
}

<div id="menu">
    <a href="#menu" class="menu__open">Open menu</a>
    <a href="#" class="menu__close">Close menu</a>
    <div class="menu">
        Hello. This is some stuff.
    </div>
</div>

Ответ 2

Если вы используете jquery, вы можете использовать jquery.toggle()

Пример:

$(".closed").click(function(event) {
    event.stopPropagation()
    $(".sf-menu").toggle();
});

Источник: https://api.jquery.com/toggle/

Ответ 3

Вы можете сделать это, используя только CSS. Хитрость заключается в том, чтобы оставить след, который можно щелкнуть, и работать как переключатель/кнопка для включения или выключения отображения. Вы можете это сделать, обернув содержимое, необходимое для переключения в какой-либо div или любой другой подходящий вам элемент.

Вот небольшой пример.

label {
  cursor: pointer;
}
#menu-toggle {
  display: none; /* hide the checkbox */
}
#menu {
  display: none;
}
#menu-toggle:checked + #menu {
  display: block;
}

<label for="menu-toggle">Click me to toggle menu</label>
<input type="checkbox" id="menu-toggle"/>
<ul id="menu">
  <li><a href="#">First link</a></li>
  <li><a href="#">Second link</a></li>
  <li><a href="#">Third link</a></li>
</ul>

Ответ 4

Вот супер простое решение в jQuery, используя теги, о которых вы упоминали. Но сначала удалите строку CSS!

Пожалуйста, не то, что этот пример doesnät, похоже, выполняется на stackoverflow.com, но отлично работает на jsfiddle.net.

$('.closed').click(function(){
    $('.sf-menu').toggle();
});

<a class="closed" href="#sidewidgetarea">Switch</a>
<div class="sf-menu">The menu</div>

Ответ 5

В HTML:

<h1 class="sf-menu"> TestText </h1>

JavaScript:

 var sfmenu = document.getElementsByClassName("sf-menu");
sfmenu[0].onclick = function () {
    if (this.style.display == 'none' ) {
        this.style.display = '';
    } else {
        this.style.display = 'none';
    }
};

Ответ 6

Если вы можете редактировать DOM, есть решение PureCSS (см. ниже), но я думаю, что лучшим решением является использование Javascript, jQuery предлагает вам решение для кроссбраузеров.

Надежда помогает!

var HIDDEN_CLASS = 'sf-menu-hidden';


/** jQuery **/
jQuery(document).ready(function($) {
  $('#jQueryTest .closed').click(function closeWithJQuery(event) {
    event.preventDefault();
    $('#jQueryTest .sf-menu').toggleClass(HIDDEN_CLASS);
  });
});


/** VanillaJS **/
document.addEventListener("DOMContentLoaded", function(event) {
  document
  .querySelector('#VanillaJSTest .closed')
  .addEventListener('click', function() {
    var el = document.querySelector('#VanillaJSTest .sf-menu');
    var task = el.classList.contains(HIDDEN_CLASS) ? 'remove' : 'add';
    
    el.classList[task](HIDDEN_CLASS);
  });
});

* {
  -webkit-user-select: none;
  user-select: none;
}

.sf-menu-hidden {
  visibility: hidden;
}

a, label {
  cursor: pointer;
}

article + article {
  margin-top: 10px;
  border-top: 1px solid green;
}

#PureCSSTest [type="checkbox"] {
  display: none;
}

#PureCSSTest [type="checkbox"]:checked + .sf-menu {
  visibility: hidden;
}

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

<article id="jQueryTest">
  <h1>Test jQuery</h1>
  <a class="closed">TOGGLE MENù</a>
  <div class="sf-menu">
    <ul>
      <li> Hey I Am On THE SCREEN</li>
    </ul>
  </div>
</article>


<article id="VanillaJSTest">
  <h1>VanillaJS</h1>
  <a class="closed">TOGGLE MENù</a>
  <div class="sf-menu">
    <ul>
      <li> Hey I Am On THE SCREEN</li>
    </ul>
  </div>
</article>


<article id="PureCSSTest">
  <h1>PURE CSS</h1>
  <a class="closed"><label for="toggleClosed">TOGGLE MENù</label></a>
  <input type="checkbox" id="toggleClosed">
  <div class="sf-menu">
    <ul>
      <li> Hey I Am On THE SCREEN</li>
    </ul>
  </div>
</article>

Ответ 7

CSS

.myVisibleLink{
     display:block;
}
.myHiddenLink{
     display:none;
}

Jquery:

var myFlag = false;
$(function() {                       //run when the DOM is ready
  $("#IDOfLink").click(function() {  //use a class, since your ID gets mangled
      if(myFlag == false){    
           myFlag = true;
           $(this).addClass("myHiddenLink");      //add the class to the clicked element
      }else{
           myFlag = false;
           $(this).addClass("myVisibleLink");      //add the class to the clicked element
     }
  });
});

Ответ 8

Вы можете добиться этого с помощью чистого Javascript.

Используйте событие onclick для тега привязки.

function OnsidewidgetareaClick()
{
 var elementObj = document.getElementsByClassName("sf-menu")[0];
  
  if (elementObj.style.display == 'block' ||elementObj.style.display=='')
    {
        elementObj.style.display = 'none';
    }
    else 
    {
        elementObj.style.display = 'block';
    }
 
}

.sf-menu {visibility: visible}

<a class="closed" href="#sidewidgetarea" onclick="OnsidewidgetareaClick();"> Switch</a>

<div class="sf-menu">
  This is the .sf-menu element.
</div>

Ответ 9

Возможно, это может помочь. Используя это, вы скроете свое меню при щелчке, а затем, согласно вашему требованию, удалите или добавите класс впоследствии.

#sf-menu:active{
    display:none;
}

Ответ 10

Мне нравится удобное решение "checkbox" в ответах, чистый CSS. Однако, если вам нужна ссылка для участия, вы можете попытаться использовать атрибут onclick в HTML-коде ссылки.

#sf-menu {
  visibility: hidden;
  opacity: 0;
  transition: all .3s;
}

<div id="#sidewidgetarea">
  <a class="closed" href="#sidewidgetarea"
     onclick="with(document.getElementById('sf-menu').style){
              visibility=(visibility==='visible'&&!(opacity=0)&&'hidden')
              ||((opacity=1)&&'visible')}"
     >Switch</a>

  <ul id="sf-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

Ответ 11

#checkbox1 {
  display:none;
}

#checkbox1:checked ~ .sf-menu {
  visibility: visible;
}

.sf-menu {
  visibility:hidden;
}

.pseudo-link {
  cursor: pointer;
}

<div>
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1"" class="pseudo-link>The link</label>
  <ul class="sf-menu">
     <li> item 1</li>
     <li> item 2</li>
     <li> item 3</li>
  </ul>
</div>

Ответ 12

К сожалению, CSS еще не имеет этой функции.

JQuery может выполняться для вас в двух строках кода.

$('.button').click(function(){
   $('.sf-menu').toggle();
});