Home / Questions / 15689
Accepted
Marc Lemien
Asked: 2020-07-03 01:19:11 +0800 CST 2020-07-03 01:19:11 +0800 CST

Как сделать раскрывающийся список, который обновляется из одного файла?

  • 772

Я хотел бы сделать мое раскрывающееся меню обновляемым из одного файла.
Позвольте мне объяснить: на моем веб-сайте у меня есть общее меню, это меню находится в файле с именем nav.html каждый раз, когда я добавляю новый раздел на свой веб-сайт, мне просто нужно перейти к этому файлу nav.html, и я помещаю туда свой новый раздел Это не позволяет мне переходить на каждую вкладку в Интернете и помещать новый раздел один за другим . Я хочу сделать то же самое, но с выпадающим меню, которое у меня есть. Если бы кто-нибудь мог сказать мне, как сделать этот выпадающий раздел обновляемым из одного файла, это было бы здорово. Это был бы один файл, куда бы я помещал каждый новый раздел.

Ставлю то, что использую сейчас:

<SCRIPT LANGUAGE="JavaScript">
    function salta(Sel)
    {
        if (Sel.ad.selectedIndex != 0)
        {
            document.location=Sel.ad.options[Sel.ad.selectedIndex].value
        }
    }
</SCRIPT>
<div>
    <form>
        <select name="ad" onchange="salta(this.form)">
            <option selected>Artículos:
            <option value=“articulo1.html”>ejemplo 1
            <option value="articulo2.html”>Ejemplo 2
        </select>
    </form>
</div>

Я хочу, чтобы где-то был файл, который можно легко обновить. Если я добавляю статьи в раскрывающийся список, а сейчас у меня уже есть 8 статей, каждый раз, когда я добавляю новый файл, я вынужден открывать 8 статей, которые представляют собой 8 разных html-файлов. Когда мне будет 25, будет хлопотно открывать их все по одному. Я думаю, что лучшим должен быть файл html или javascript, в котором находится мое редактируемое меню.

javascript

2 Answers

  1. Best Answer

    Вместо того, чтобы создавать документ, HTMLя предлагаю вам создать scriptраскрывающийся список и вставить его туда, куда вы хотите. Что-то вроде этого:

    // deplegable.js
class miDesplegable {
  constructor({
    target = 'body', 
    opciones = [], 
    listener = new Function(), 
    nombre = ''} = {}) {

      this.target = $(target);
      this.form = $('<form/>');
      this.element = $('<select/>');
      this.element.attr('name', nombre);
      this.opcion_no_seleccionable = $('<option disabled selected>Otros artículos</option>');
      this.element.append(this.opcion_no_seleccionable);
      this.form.append(this.element);
    
      opciones.map(e=>{
        var opcion = $(`<option value="${e.value}">${e.titulo}</option>`);
        this.element.append(opcion);
      });

      this.listener = typeof listener === 'function' ? listener : new Function();
        
      this.element.on('change', this.listener.bind(null, this.element.get(0)));
    
      this.target.append(this.form);
  }
}
/*
----------------------------------------------------
Esto lo puedes poner dentro de un archivo "main.js" 
y llamarlo en los documentos HTML que necesites el 
desplegable.
----------------------------------------------------
*/
var listener = function(e){
  console.log(e.options[e.selectedIndex].value);
  // Aquí es donde abres la página, hay varias formas.

 //window.location.replace(e.options[e.selectedIndex].value);
 // window.location = e.options[e.selectedIndex].value;
 // window.open(e.options[e.selectedIndex].value); // Este abre en una pestaña nueva.
}

var desp = new miDesplegable({
  target : '#miDiv',
  opciones : [{
    titulo : 'UNO',
    value : '1'
  },{
    titulo : 'DOS',
    value : '2'
  },{
    titulo : 'TRES',
    value : '3'
  }],
  listener : listener
});

$('.animales').each((i, el)=>
  new miDesplegable({
    target : el,
    opciones : [{
      titulo : 'Perro',
      value : '1'
    },{
      titulo : 'Gato',
      value : '2'
    },{
      titulo : 'Loro',
      value : '3'
    }],
    listener : listener
  })
);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- página_1.html -->
<p>Página 1</p>
<div id="miDiv"></div>

<!-- página_2.html -->
<p>Página 2</p>
<div class="animales"></div>
<div class="animales"></div>
<div class="animales"></div>

    Поскольку некоторые из этих вещей не работают в некоторых браузерах, вы можете преобразовать этот код в ES5 отсюда Babeljs.io

    • 3

  2. Я оставляю вам пару альтернатив, основанных на том, что вы говорите в комментариях ниже. Они похожи, они состоят из HTML-файла в файле dropdown.html и последующей загрузки его содержимого с помощью JavaScript (для простоты я использую jQuery и метод, load()но это можно сделать с помощью чистого JavaScript и вызова AJAX).

    Общее для обоих вариантов

    Там, где вы хотите разместить раскрывающийся список, поместите divпустой идентификатор «выпадающий список» (например) следующим образом:

    <div id="desplegable"></div>

    Итак, после загрузки jQuery вы можете загрузить dropdown.html с помощью метода загрузки следующим образом:

    <script>
$("#desplegable").load("desplegable.html");
</script>

    И это загрузит содержимое dropdown.html в элемент с идентификатором «выпадающий».

    Альтернатива 1: HTML + JavaScript

    Если у вас есть файл с кодом JavaScript, добавьте функцию перенаправления страницы:

    function salta(enlace) {
    if (enlace != "")
        document.location = enlace;
}

    И ваш файл dropdown.html будет выглядеть примерно так:

    <select onchange="salta(this.value)">
    <option value="">Elige un artículo</option>
    <option value="articulo1.html">Artículo 1</option>
    <option value="articulo2.html">Artículo 2</option>
    <option value="articulo3.html">Artículo 3</option>
    <option value="articulo4.html">Artículo 4</option>
</select>

    Альтернатива 2: HTML + CSS

    В этом варианте вам не нужно иметь функцию JavaScript в вашем коде (кроме загрузки страницы с помощью AJAX), потому что все будет сделано с помощью HTML и CSS. Содержимое dropdown.html может быть примерно таким (я сделал его исполняемым, чтобы вы могли видеть, что он имитирует раскрывающийся список):

    <ul id="desplegable">
	<li>Elige un artículo</li>
	<li><a href="articulo1.html">Artículo 1</a></li>
	<li><a href="articulo2.html">Artículo 2</a></li>
	<li><a href="articulo3.html">Artículo 3</a></li>
	<li><a href="articulo4.html">Artículo 4</a></li>
</ul>
<style type="text/css">
ul#desplegable {
	list-style:none;
	margin:0;
	padding:0;
	width:200px;
	height:25px;
	overflow:visible;
}
ul#desplegable li {
	display:none;
	height:25px;
	line-height:25px;
	position:relative;
	z-index:9;
	background:white;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
}
ul#desplegable li:nth-child(1) {
	display:block;
	border:1px solid #ccc;
}
ul#desplegable li:nth-child(1):after {
	content:"+";
	float:right;
	margin-right:7px;
}
ul#desplegable:hover li {
	display:block;
}
ul#desplegable li:last-child {
	border-bottom:1px solid #ccc;
}
ul#desplegable li a {
	display:block;
}
ul#desplegable li a:hover {
	background:#f0f0f0;
}
</style>

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

    • 3