RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / user-267941

Nice's questions

Martin Hope
Nice
Asked: 2020-03-25 17:12:07 +0000 UTC

tv-参数值在pdoPage中不显示

  • 0

我不明白可能是什么问题,我花了2天的时间,这是结论:

<div id="pdopage">
  <div class="rows">
    [[!pdoPage?
        &parents   =`6`
        &element   = `pdoMenu`
        &ajaxMode  =`default`
        &limit     =`3`
        &sortby    = `menuindex`
        &tplOuter  = `@INLINE <div class="offers_items">[[+wrapper]]</div>`
        &tpl       = `@INLINE [[$rent_item_page]]`
    ]]
  </div>
  [[!+page.nav]]
</div>

这是输出元素模板:

<div class="expert-single">
    <div class="expert-img">

      [[+tv.specoffer:is=`spec`:then=`<b>Спецпредложение</b>`:else=``]]

      <a href="[[+link]]"><img src="[[+tv.image_item]]"></a>
    </div>
    <div class="expert-content text-center">
      <h3>[[+pagetitle]]</h3>
      <span>Офисное помещение</span>
      <p>18 500 руб. за м² в год</p>
      <p>[[+tv.price_month]] руб. в месяц</p>
      <a href="[[+link]]">Подробнее</a>
    </div>
</div>

特别关心图像的输出

modx
  • 1 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-10-10 15:20:56 +0000 UTC

替换按钮中的文本,Modx Revo

  • 0

我无法更改表单提交按钮中的文本,这是针对 ajaxform 的,代码中是这样写的:

<div class="form-group">
            <div class="controls">
                <button type="submit" class="btn btn-primary" value="Отправить сообщение">[[%af_submit]]</button>
            </div>
        </div>

记录值没有帮助(文本保持不变 - 发送。

modx
  • 1 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-08-13 15:22:06 +0000 UTC

将动画应用于所有链接,jQuery

  • 0

我怎样才能使它不为每个链接编写单独的函数,而是使其通用,大约有 20 个链接。这就是我现在的样子:

$("a[href^='#ranking']").on('click', function() {
    var target = $('#ranking');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 1000);
});

$("a[href^='#pull']").on('click', function() {
    var target = $('#pull');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-06-26 16:27:10 +0000 UTC

切换复选框不会反映在按钮上

  • 0

无法配置按钮活动的切换,代码似乎写对了。

$(document).ready(function($) {
  function(e) {
    if ($('#pers_data').is(":checked")) {
      $("#send_but").removeAttr('disabled');
      $("#send_but").css("background", "#191919");
    } else {
      $("#send_but").attr('disabled', "disabled");
      $("#send_but").css("background", "#6B6B6B");
    }
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span><input type="checkbox" id="pers_data"> Я согласен на обработку персональных данных (<a href="#" style="color:#0988AE;">соглашение</a>).</span>


<button id="send_but" type="submit" disabled="disabled" class="button">Отправить</button>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-05-06 14:56:41 +0000 UTC

通过电视参数选择某些菜单项,Modx

  • 0

网站上有一个员工页面(模板),这个页面显示了这个员工和相关项目的信息。所以问题是 - 如何确保项目的选择是由我在电视领域与项目一起写的作者的名字进行的?我知道 pdoResources 中有一个 &tvFilters 参数,但我不知道如何在 pdoMenu 中执行它。请帮帮我。这是代码段的输出:

[[pdoMenu?
                        &parents         = `3`
                        &limit           = `0`
                        &level           = `0`
                        &showUnpublished = `0`
                        &resources       = `-12`
                        &sortby          = `RAND()`
                        &tplOuter        = `@INLINE <div class="blog">[[+wrapper]]</div>`
                        &tpl             = `@INLINE [[$project_item]]`
                        &includeTVs      = `author,project_img,shorttext,filter,project_sort,date`
                    ]]

块项目_项目:

<div class="width-small">
<div class="blog-post">
    <a href="[[+link]]"><img src="[[+project_img]]" alt="" /></a>
    <h3 class="t-left"><a href="#">[[+pagetitle]]</a></h3>
    <ul class="t-left lato f-small">
        <li class="no-margin">Автор: <a href="#">[[+author]]</a></li>
        <li>Дата: [[+date]]</li>
    </ul>
    <p class="t-left">
        [[+shorttext]]
    </p>
    <a href="[[+link]]" class="button">Подробнее</a>
</div>

cms
  • 1 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-01-14 16:41:50 +0000 UTC

DOM 元素不按条件出现

  • 0

消息“属性列表为空。”不会出现。删除列表中的所有属性后,我无法理解原因,尽管我在代码中写了我需要的所有内容:

$(".delete_1").click(function() {
  $(".list__item_1").remove()
});
$(".delete_2").click(function() {
  $(".list__item_2").remove()
});
$(".delete_3").click(function() {
  $(".list__item_3").remove()
});

if ($(".list__item").length == 0) {
  $(".list__without_item").css("display", "block");
} else if ($(".list__item").length > 0) {
  $(".list__without_item").css("display", "none");
};
.list__item {
  max-width: 250px;
  position: relative;
  padding: 10px;
  border-radius: 5px;
  background: #f4f4f4;
  color: #000;
  margin-bottom: 3px;
}

.list__item_close {
  position: absolute;
  top: 0;
  left: 100%;
  width: 70px;
  height: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list__favors">
  <p class="list__without_item">Список свойств пуст.</p>
  <div class="list__item list__item_1">
    <div class="list__item_close delete_1">Удалить</div>
    Свойство 1
  </div>
  <div class="list__item list__item_2">
    <div class="list__item_close delete_2">Удалить</div>
    Свойство 2
  </div>
  <div class="list__item list__item_3">
    <div class="list__item_close delete_3">Удалить</div>
    Свойство 3
  </div>
</div>

javascript
  • 3 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-12-23 22:05:38 +0000 UTC

记录输入值的总和

  • 1

由于某种原因,复选框的总和不会写入最终跨度。注册事件 onchange。但是复选框中的值仅从被选中的那个中写入,其余的是未定义的,因此不会相互累加。

$('input#set_1, input#set_2, input#set_3').change(function() {
  var set_1 = $('input#set_1:checked').val();
  var set_2 = $('input#set_2:checked').val();
  var set_3 = $('input#set_3:checked').val();

  var setup = set_1 + set_2 + set_3;
  $('.setup').html(setup);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span>Опция 1</span><input id="set_1" type="checkbox" value="3000">
</div>
<div>
  <span>Опция 2</span><input id="set_1" type="checkbox" value="6000">
</div>
<div>
  <span>Опция 3</span><input id="set_1" type="checkbox" value="1000">
</div>

<p>Результат: <span class="setup">0</span> р.</p>

javascript
  • 3 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-12-23 11:58:44 +0000 UTC

消失的模态窗口

  • 1

我不明白为什么当您单击窗口本身时模态窗口会消失,尽管我写道只有当您单击覆盖时它才会消失。注册了一个窗口和 z-index 大,没有帮助。

$("button").click(function() {
  $(".main").addClass("show");
});
$(".main").click(function() {
  $(this).removeClass("show");
});
body {
  z-index: 1;
}

.main {
  opacity: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #c2c2c2;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  transition: .3s;
  .modal {
    width: 300px;
    height: 200px;
    background: #fff;
    z-index: 1000;
  }
}

button {
  z-index: 10;
}

.show {
  opacity: 1;
  z-index: 50;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button>Нажми!</button>
  <div class="main">
    <div class="modal"></div>
  </div>
</body>
</html>

在问题中,模态窗口本身不再出现,但在浏览器中可见......

html
  • 1 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-12-22 20:00:02 +0000 UTC

条件下元素的外观

  • 1

如果块中的至少一个段落具有 .clicked 类,则必须显示该按钮。这是我能想到的......:由于某种原因,按钮立即出现,尽管 .clicked 类没有一个 p。

 $("p").click(function() {
  	$(this).toggleClass("clicked");
	});
  if ($(".block").find("p.clicked")) {
    $('button').css('display', 'block');
  } else {
    $('button').css('display', 'none');
  };
.clicked {
  background: #000;
  color: #fff;
  transition: .2s;
}

p {
  border: 1px solid #000;
  padding: 7px;
  margin: 0 0 5px;
}

button {
  padding: 10px;
  border: none;
  border-radius: 4px;
  background: red;
  color: #fff;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
  <p>Далеко-далеко за словесными горами в стране.</p>
  <p>Далеко-далеко за словесными горами в стране.</p>
  <p>Далеко-далеко за словесными горами в стране.</p>
  <p>Далеко-далеко за словесными горами в стране.</p>
  <p>Далеко-далеко за словесными горами в стране.</p>
</div>

<button>Готово!</button>

html
  • 1 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-12-22 17:00:58 +0000 UTC

取消选中复选框时的消息

  • 1

每次取消选择表单的任何复选框时,我都无法弄清楚如何使块动画运行。而且我只设法在选择复选框时执行此脚本一次,反之亦然)

这是代码:

$("input, label").click(function() {
  $(".choose__del").css("animation", "choose 2s ease-in-out");
});
.choose__del {
  position: absolute;
  bottom: 70px;
  height: 56px;
  background: #4D4D4D;
  left: 0;
  right: 0;
  color: #fff;
  font-family: 'Roboto_Medium';
  text-align: center;
  line-height: 55px;
  transform: translateY(50px);
  z-index: -1;
  opacity: 0;
}

label {
  display: block;
  width: 20%;
}

@keyframes choose {
  5% {
    transform: translateY(0);
    z-index: 1;
    opacity: 1;
  }
  95% {
    transform: translateY(0);
    z-index: 1;
    opacity: 1;
  }
  100% {
    transform: translateY(50px);
    z-index: -1;
    opacity: 0;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="choose__wrap">
  <div class="choose__head">
    <h4>Материал</h4>
    <button>Сбросить</button>
  </div>
  <form action="#">
    <label for="mat_1">Чекбокс 1</label>
    <label for="mat_2">Чекбокс 2</label>
    <label for="mat_3">Чекбокс 3</label>
    <label for="mat_4">Чекбокс 4</label>
    <label for="mat_5">Чекбокс 5</label>
    <input type="checkbox" id="mat_1" name="mat_1" value="1">
    <input type="checkbox" id="mat_2" name="mat_2" value="2">
    <input type="checkbox" id="mat_3" name="mat_3" value="3">
    <input type="checkbox" id="mat_4" name="mat_4" value="4">
    <input type="checkbox" id="mat_5" name="mat_5" value="5">
  </form>
  <div class="choose__apply">
    <p>Применить фильтр</p>
  </div>
  <div class="choose__del">Выбор снят</div>
</div>

html
  • 2 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-12-18 00:02:29 +0000 UTC

svg图标不显示

  • 3

该图标不以 svg 格式显示。像这样写:

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 94.926 94.926" style="enable-background:new 0 0 94.926 94.926;" xml:space="preserve">
	<symbol>
		<path             d="M55.931,47.463L94.306,9.09c0.826-0.827,0.826-2.167,0-2.994L88.833,0.62C88.436,0.224,87.896,0,87.335,0
				c-0.562,0-1.101,0.224-1.498,0.62L47.463,38.994L9.089,0.62c-0.795-0.795-2.202-0.794-2.995,0L0.622,6.096
				c-0.827,0.827-0.827,2.167,0,2.994l38.374,38.373L0.622,85.836c-0.827,0.827-0.827,2.167,0,2.994l5.473,5.476
				c0.397,0.396,0.936,0.62,1.498,0.62s1.1-0.224,1.497-0.62l38.374-38.374l38.374,38.374c0.397,0.396,0.937,0.62,1.498,0.62	s1.101-0.224,1.498-0.62l5.473-5.476c0.826-0.827,0.826-2.167,0-2.994L55.931,47.463z"/>
  </symbol>
</svg>


<div class="modalRecall__close">
  <svg>
    <use xlink:href="#Capa_1" class="capa_1"/>
  </svg>
</div>

close.svg 文件是单个图标,而不是精灵。已经尝试了一切。ON id to mine 我所做的定义已经是多余的了?通过样式出现,作为背景。

我需要通过标记显示它。在 Mozilla 中它开始显示,但在其他浏览器中没有(

我在检查器中查看 DOM - 不同浏览器中绝对没有差异,但图标仅出现在 Firefox 中。

Chrome 写道:错误:属性宽度:预期长度,“自动”。尽管 width="auto" 是值得的。

html
  • 1 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-11-08 19:47:55 +0000 UTC

使用 jquery 选择元素

  • 1

如何使用 jquery 来准确选择显然是 UL 子级的最后 4 个 LI 元素?

<section class="menu">
  <ul class="list">
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
    <li>Пункт 4</li>
    <li>Пункт 5</li>
    <li>Пункт 6</li>
    <li>Пункт 7</li>
    <li>Пункт 8</li>
    <li>Пункт 9</li>
  </ul>
</section>

html
  • 1 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-08-02 18:41:55 +0000 UTC

与存根链接

  • 1

如何使当您单击带有存根的链接时,例如在页面中间,它不会跳转到页面的最顶部?使页面上的位置保持在那个位置。

.middle {
  margin-top: 400px;
}
<ul class="middle">
  <li><a href="#">Почтовые коробки оригинальные</a></li>
  <li><a href="#">Почтовые коробки бурые</a></li>
  <li><a href="#">Почтовые коробки бурые с бланком</a></li>
</ul>

html
  • 3 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-07-19 21:20:16 +0000 UTC

jQuery 变量中没有返回结果

  • 0

我不明白为什么代码中的计算不起作用:

$(document).ready(function(){
  if ($('#type1:checked')) {
    var shed   = base+distance+size1+rubber;
  } else if ($('#type2:checked')) {
    var shed   = base+distance+size2+rubber;
  } else if ($('#type3:checked')) {
    var shed   = base+distance+size3+rubber;
  } else if ($('#type4:checked')) {
    var shed   = base+distance+size3+rubber;
  } else ($('#type5:checked')) {
    var shed   = base2+distance+size4+rubber;
  }
  $('#last__par_count').html(shed);
});

id=last__par_count 的标签没有填写计算结果。所有可用的变量都有值。

jquery
  • 2 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-07-03 17:18:22 +0000 UTC

使用 jQuery 设置字段样式

  • 0

如何确保当我单击“计算”按钮时,如果某些选择值为 0,它们会以红色边框突出显示,现在它们都被突出显示,无论它们的值是否为 0。即使是选定的也以红色突出显示:

var selectLength = $("#length");
var selectStudents = $("#students");
var selectDuration = $("#duration");
var selectValidity = $("#validity");
var selectQuantity = $("#quantity");
var selectIntro = $("#intro-class");

$("#button-result").on("click", function() {
  if (!!!selectLength.val() || !!!selectStudents.val() || !!!selectDuration.val() || !!!selectValidity.val() || !!!selectQuantity.val()) {
    $("select:not(#intro-class)").addClass("sel-color");
  } else {
    $("select:not(#intro-class)").removeClass("sel-color");
  }
});

$("#length, #duration, #quantity, #validity, #students").change(function() {
      if ($("select").val() != 0) {
        $(this).addClass('sel-color');
      } else {
        $(this).removeClass('sel-color');
      }

      $("#button-clear").click(function() {
        $("select").val('0');
        $('select').attr('disabled', false);
        $("#result-culc").html('');
      });

    }
  select {
    border: 3px solid #4A6695;
  }
  .sel-color {
    border: 3px solid #B80001;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-calc">
  <label for="length">French course</label>
  <select id="length" name="length">
    <option value="0">Choose</option>
    <option value="General">General Course</option>
    <option value="Exams">Exams Preparation</option>
    <option value="General">Conversational French</option>
    <option value="Exams">Business French</option>
    <option value="Exams">Civilisation française</option>
  </select>
</div>
<div class="wrap-calc">
  <label for="students">For how many students?</label>
  <select id="students" name="students">
    <option value="0">Choose</option>
    <option value="indiv">Individual</option>
    <option value="group">2-3 people</option>
  </select>
</div>
<div class="wrap-calc">
  <label for="duration">Lesson duration</label>
  <select id="duration" name="duration">
    <option value="0">Choose</option>
    <option value="lesDur-30">30 minutes</option>
    <option value="lesDur-60">60 minutes</option>
  </select>
</div>
<div class="wrap-calc">
  <label for="validity">Plan validity</label>
  <select id="validity" name="validity">
    <option value="0" selected="" disabled="">Choose</option>
    <option id="1mon" value="1month">One month</option>
    <option id="3mon" value="3months">Three months</option>
  </select>
</div>
<div class="wrap-calc">
  <label for="quantity">Quantity of lessons</label>
  <select id="quantity" name="quantity">
    <option value="0" selected="" disabled="">Choose</option>
    <option id="q4" value="Quantity-4">4 lessons</option>
    <option id="q8" value="Quantity-8">8 lessons</option>
    <option id="q12" value="Quantity-12">12 lessons</option>
    <option id="q36" value="Quantity-36">36 lessons</option>
  </select>
</div>
<p id="warn">Please, fill in all the fields</p>

<div class="wrap-calc d-flex justify-content-between">
  <div id="button-clear" class="submit-block submit-block__culc">
    <p>Clear</p>
  </div>
  <div id="button-result" class="submit-block submit-block__culc">
    <p>Calculate</p>
  </div>
</div>
<div class="wrap-calc">
  <div class="submit-block">
    <p>This French course costs : <span value="0" id="result-culc"></span> euros</p>
  </div>
</div>

html
  • 2 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-06-28 17:29:53 +0000 UTC

在选择 value='0' 时使用 jQuery 弹出文本

  • 0

有一个列表和一个按钮。我们如何使用jQuery在我们点击按钮时弹出一个警告<p id="warn">Warning</p>,至少有一个select带有值的value='0' ?

#warn {
  display: none;
}
<select id="length" name="length">
  <option value="0" selected="" disabled="">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="weight" name="weight">
  <option value="0" selected="" disabled="">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="height" name="height">
  <option value="0" selected="" disabled="">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<p id="warn">Warning</p>

<button id="button">Result</button>

html
  • 2 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-06-27 13:26:56 +0000 UTC

在jQuery中使用属性分组选择器

  • 3

如何在单个函数中引用 jQuery 中的一组元素?
例如链接:

a[href^="page-1.html#"]

这种语法对我不起作用:

$('a[href^="page-1.html#"]', 'a[href^="page-2.html#"]').click(function(e) {
  e.preventDefault();
});
jquery
  • 1 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-06-22 17:40:58 +0000 UTC

使用两个处理程序进行提交

  • 0

除了 之外,是否可以ajax应用两个表单处理程序mail.php?

  $("#form").submit(function() {
    var th = $(this);
    $.ajax({
      type: "POST",
      url: "../mail.php",
      data: th.serialize()
    }).done(function() {
      alert("Thank you, your message was sent.");
      setTimeout(function() {
        th.trigger("reset");
      }, 1000);
    });
    return false;
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jquery
  • 1 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-06-22 14:56:33 +0000 UTC

jQuery条件不起作用

  • 0

根据第一个值val,一切正常,但Quantity-8不再正常。有什么问题?

然而,如何从月份的选择方面做出相同的条件?例如,选择optioncvalue === '3months'并使非活动optioncvalue等于Quantity-4和Quantity-8

$('#quantity').change(function() {
  if ($(this).val() === 'Quantity-4' && 'Quantity-8') {
    $('#3mon').attr('disabled', true);
  } else {
    $('#3mon').attr('disabled', false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-calc">
  <label for="quantity">Quantity of lessons</label>
  <select id="quantity" name="quantity">
    <option value="0"></option>
    <option value="Quantity-4">4 lessons</option>
    <option value="Quantity-8">8 lessons</option>
    <option value="Quantity-12">12 lessons</option>
    <option value="Quantity-36">36 lessons</option>
  </select>
</div>
<div class="wrap-calc">
  <label for="validity">Plan validity</label>
  <select id="validity" name="validity">
    <option value="0"></option>
    <option id="1mon" value="1month">One month</option>
    <option id="3mon" value="3months">Three months</option>
  </select>
</div>

jquery
  • 3 个回答
  • 10 Views
Martin Hope
Nice
Asked: 2020-06-22 12:59:07 +0000 UTC

反转 :hover 的效果

  • 3

有一个菜单,在一些子菜单项中。当在计算机上以 768px 的分辨率打开站点时,效果通过 :hover 伪类应用。所以问题是我需要以某种方式取消低于 768px 分辨率的悬停效果(显然可以在媒体查询中执行此操作),然后在低于 768px 的分辨率下应用 jQuery 脚本,该脚本在下面用于切换班级。

首要任务是如何让我的 jQuery 脚本只在低于 768px 的分辨率下触发。怎么可能实施?

这是菜单:

  $('.toggle-menu').click(function() {
    $('.toggle-menu').removeClass('active');
    $(this).toggleClass('active');
  });
.topmenu {
  display: flex;
  flex-wrap: wrap;
  backface-visibility: hidden;
  background: #fff;
}

.topmenu>li {
  display: inline-block;
  position: relative;
}

.topmenu>li>a {
  height: 30px;
  line-height: 30px;
  padding: 0 7px;
  font-weight: bold;
  color: #6EA3DD;
  text-transform: uppercase;
  transition: .1s ease-in-out;
  border-bottom: 2px solid #fff;
}

.topmenu>li>a.actual-menu {
  border-bottom: 2px solid #FBC7CB;
}

.down:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #6EA3DD;
  left: 47%;
  bottom: -7px;
  z-index: 100;
}

.topmenu li a:hover {
  color: #E6855F;
  border-bottom: 2px solid #FBC7CB;
  transition: .1s ease-in-out;
}

.submenu {
  background: white;
  border: 2px solid #95BCE6;
  position: absolute;
  left: 5%;
  right: -35%;
  visibility: hidden;
  opacity: 0;
  padding: 0 10px 5px;
  z-index: 150;
  transition: .1s ease-in-out;
  transform: translate(0%, 15px);
}

.topmenu>li:hover .submenu {
  visibility: visible;
  opacity: 1;
  transform: translate(0%, 0px);
}

.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="navigate" class="navigate">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="navigate__menu">
          <nav>
            <ul class="topmenu">
              <li class="toggle-menu"><a href="#" hreflang="en" class="down">Learn French</a>
                <ul class="submenu">
                  <li><a href="#">Why study French?</a></li>
                  <li><a href="#">French on Skype</a></li>
                  <li><a href="#">A few steps</a></li>
                  <li><a href="#">Our French lessons</a></li>
                </ul>
              </li>
              <li><a href="ourtutor.html" hreflang="en">Our Tutor</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</section>

jquery
  • 2 个回答
  • 10 Views

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5