小编Fre*_*ddy的帖子

我的垂直导航有5个链接.在屏幕调整大小时,我的垂直导航变为水平导航,其中三个(显示5个链接)显示,另一个链接menu显示另外两个剩余链接.

出于某种原因,在屏幕调整大小时,当menu显示时,列表内容已经显示,然后当单击菜单时,即使您没有悬停在其上,它也会保留悬停属性.这是视觉效果:

1.在屏幕上调整大小,它看起来像这样:

2.将鼠标悬停在菜单上时:

哪个可以.我只希望在单击菜单链接时显示链接,而不是悬停在上面.但我不明白为什么要说menu两个li空格.

3.点击菜单时:

还行吧.但是,请注意菜单li现在的大小如何.

4.单击menu然后将鼠标从链接移开:

如上所述,我不知道是什么导致了这些问题.

这是我目前的做法:

$(document).ready(function() {
  $(".show").click(function() {
    $(".subMenu").toggleClass("active");
    return false;
  });
});

.site-wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}


/* make divs appear below each other on screen resize */

@media screen and (max-width: 540px) {
  .site-wrapper {
    flex-direction: column;
  }
}

ul.subMenu {
  display: none;
}

.subMenu.active {
  display: flex;
  flex-direction: column;
}

li.show …

我正在尝试创建一个自动循环播放的轮播。最初我正在实现slick slider，但后来我遇到了这种仅 CSS 的方法：

body {
  align-items: center;
  background: #E3E3E3;
  display: flex;
  height: 100vh;
  justify-content: center;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

.slider {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 960px;
}

.slider::before,
.slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px; …

我利用YouTube的API创建了一个iframe.

在页面加载时,环境视频设置为自动播放,没有声音.但是,在div包含它的顶部iframe,我有一个按钮.

点击此按钮,我希望视频重置(从头开始),YouTube控件和声音开启 - 类似于英雄中的那个:https://www.hugeinc.com/work.

想知道我会怎么做？它会涉及创建另一个iframe吗？

不希望这样做作为模态弹出窗口

代码:

//  Load  IFrame Player API 
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Creating iframe
var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    videoId: 'jagIsKF8oVA',
    playerVars: {
      'autoplay': 1,
      'controls': 0,
      'mute': 1,
      'loop': 1,
      'rel': 0
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

//  Calls function
function onPlayerReady(event) {
  event.target.playVideo();
} …

我有一个没有目的地的锚链接,但它有一个onClick event:

<li><a href onClick='deletePost()'> Delete </a> </li>

据我所知,由于PHP的性质和它是服务器端语言,我不能直接在JavaScript中执行PHP代码块,所以我必须利用AJAX这样做.

当delete点击链接时,我需要它来执行这个查询(del_post.php)

<?php include("connect.php");

$delete_query = mysqli_query ($connect, "DELETE FROM user_thoughts WHERE id = 'id' ");

?>

我曾尝试使用类似的过去问题来理解AJAX,但由于相对较新,我无法完全掌握它的语言.这是我尝试过的:

 function deletePost() {
        xmlhttp=new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
             xmlhttp.open("GET", "del_post.php", false);
             xmlhttp.send();
         }
       }     
}

但是,单击该链接只会将URL更改为http://localhost/.

我有一个多形式，分为三个fieldsets。我试图实现的工作流程是：

• 向用户呈现表单，其中包含第一个fieldset.
• 用户完成他们能做的并点击.next按钮。
• validate().next单击按钮时发生，如果无效（即未填写必填字段），我想向这些inputs添加一个错误类，以便我可以设置它们的样式（添加红色边框）。
• 如果它们是正确的（所有字段都填写了必填项），然后继续在下一个fieldset.

目前我validate()的出现有点小故障。例如在我下面的演示中，执行以下步骤：

• 单击下一步按钮（检查控制台以查看确认按钮已被单击的消息）。
• 请注意没有出现错误消息？
• 现在单击名字字段。请注意错误消息现在是如何显示的？
• 这也很奇怪，因为address也是必填字段（如 JS 中所定义），但没有显示错误？

单击按钮时，我希望显示错误。

现在，假设填写了名字和地址（该字段集中的两个必填字段），下次单击时，由于这些字段有效，我想在下一个字段集中设置动画，但submitHandler不起作用？不确定为什么？

演示：

jQuery(function($) {

  var current_fs, next_fs, previous_fs;
  var left, opacity, scale;
  var animating;

  $(".next").click(function() {
  
  console.log('next is clicked');


    $("form").validate({
      rules: {
        // name : param
        fname: "required",
        address: "required",
        phone: {
          required: true,
          matches: "^(\\d|\\s)+$",
          minlength: 11,
          maxlength: 11
        }
      },
      messages: {
        fname: "Please enter your firstname", …

自从我升级到 后Mac，Monteray我就一直遇到问题Vagrant。

最初，我经常在运行时看到vBoxManage错误。我之前在 SO 上发布了一个关于此的问题，请参阅此处了解详细信息。terminalvagrant up

今天，我再次卸载VirtualBox（删除VirtualBox VMs文件夹并将应用程序移至垃圾箱）并重新安装VirtualBox 6.1.3OS X 主机（此处链接）。

然后我继续运行vagrant up并terminal成功编译：

看到著名的绿色泰迪熊后，我尝试去vvv.test，但是页面无法加载。我尝试过访问provisioned以前访问过的网站的 URL，但它们也无法加载。

我也跑了vagrant up --debug，没看到什么问题。

我的Vagrant版本是2.2.19

不确定下一步要采取什么步骤？

编辑：

采取的步骤：

1. 已运行vagrant up --provision到文件中的配置站点config.yml（config.yml文件如下所示）
2. 尝试访问website-dev.test，页面无法加载
3. 尝试访问vvv.test，页面无法加载
4. 已运行vagrant reload --provision并重复步骤 2 和 3，但结果相同
5. 已运行vagrant …

我正在创建一个 4x3 网格布局，并希望第二行居中，因为顶行有四个元素。

像这样的东西：

演示代码：

.grid-container {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 50% 50%;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
</div>

不确定为什么$(...).counterUp is not a function。

• Waypoints在 之后排队Counter-up。
• WP 核心 JQuery 在它们之前加载。

查看源码排序：

<script type='text/javascript' src='http://testsite.com/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js?ver=5.2.3'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js?ver=5.2.3'></script>

我如何排队Waypoints和CounterUp：

wp_enqueue_script( 'counterup', 'https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js', array(), false, false);
wp_enqueue_script( 'waypoints', 'https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js', array(), false, false);

正在使用的JS：

jQuery(document).ready(function($) {
    $('.counter').counterUp({
        delay: 10,
        time: 1000
    });
});

我在这里缺少什么？

编辑：

文件加载位置的屏幕截图：

也试过拉counterup通过node_modules：

wp_enqueue_script( 'counterup', plugin_dir_url( __FILE__ ) . 'node_modules/counterup/jquery.counterup.min.js' );

... 仍然得到同样的错误信息。

我正在尝试建立一个模块化的工作流程，在运行时gulp，它将文件夹中的 SASS 文件编译为 CSS。这些新的 CSS 文件将存储在同一文件夹中。

例如，这是我当前的文件夹结构：

theme
   - modules
      - hero
         - hero.html
         - hero.scss

这是我的“gulpfile.js”：

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task( 'sass', function() {
    return gulp.src('modules/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('modules/**/*.css'))
});

但是，在运行时gulp sass，这是我的文件夹结构的样子：

theme
   - **
      - *.css
         - hero
            - hero.css
   - modules
      - hero
         - hero.html
         - hero.scss

而我所追求的是：

theme
   - modules
      - hero
         - hero.html
         - hero.scss
         - hero.css (hero.css to appear here after running gulp)

我离得远吗？

我有以下图标设置header.php：

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri()." /assets/build/favicon/apple-touch-icon.png "; ?>">
  <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri()." /assets/build/favicon/favicon-32x32.png "; ?>">
  <link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri()." /assets/build/favicon/favicon-16x16.png "; ?>">
  <link rel="manifest" href="<?php echo get_template_directory_uri()." /assets/build/favicon/site.webmanifest "; ?>">
  <link rel="mask-icon" href="<?php echo get_template_directory_uri()." /assets/build/favicon/safari-pinned-tab.svg "; ?>" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
  <?php wp_head(); ?>
</head>

我将所有的图标文件存储在assets/build/favicon.

在/父页面或父页面上，会出现我的图标。但在custom …