Question

我有3个按钮，当点击它们时会打开一个子菜单，但是无论何时单击一个，其他的按钮都会在页面中移动，如果点击一个按钮，我怎么能让它们保持内联？我已经尝试过改变职位但是他们都变得彼此重要，任何帮助都会非常感激，所以提前谢谢你！

这是我的代码：

HTML

<button class="menu-trigger btn-1">1</button>
<ul class="menu">
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>
<button class="menu-trigger btn-1">2</button>
<ul class="menu">
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>
<button class="menu-trigger btn-1">3</button>
<ul class="menu">
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

CSS

.menu-trigger{
    padding: 10px 25px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    background: transparent;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    color: lightgray;
}

.menu{
    display: none;
}

.menu.open{
    display:block;
}

.btn-1 {
    border: 2px solid yellow;
}

.btn-1:hover {
  background: #000;
  color: #fff;
}

JS

 $(function () {
      $(".menu-trigger").click(function () {
        $(this).next(".menu").toggleClass("open"); // Selects only the next one!
        $(this).html($(this).next(".menu").hasClass("open") ? menu-trigger : menu-trigger);
        return false;
      });
    });

Answer 1

您需要更改HTML标记并添加一些CSS规则才能开始工作，因此我对您的代码进行了一些更改。

首先需要使用菜单ul打包每个按钮，将它们包装到ul > li HTML标记
您需要制作每个li以包裹每个<button> <ul>...</ul> </button>制作display: inline-block;和position: relative;
使ul.menu位置为absolute。

您已在此处编辑了代码。

＆＃13;

$(function () {
      $(".menu-trigger").click(function () {
        $(this).next(".menu").toggleClass("open"); // Selects only the next one!
        $(this).html($(this).next(".menu").hasClass("open") ? menu-trigger : menu-trigger);
        return false;
      });
    });

＆＃13;

.menu-trigger{
    padding: 10px 25px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    background: transparent;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    color: lightgray;
}

.menu-container {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-container > li {
  display: inline-block;
  position: relative;
}

.menu{
    position: absolute;
    left: 0;
    display: none;
}

.menu.open{
    display:block;
}

.btn-1 {
    border: 2px solid yellow;
}

.btn-1:hover {
  background: #000;
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class='menu-container'>
<li>
  <button class="menu-trigger btn-1">1</button>
  <ul class="menu">
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</li>

<li>
  <button class="menu-trigger btn-1">2</button>
  <ul class="menu">
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</li>

<li>
  <button class="menu-trigger btn-1">3</button>
  <ul class="menu">
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</li>
</ul>

＆＃13;

我希望你觉得它很有用

Answer 2

尝试更改：

CSS：

$(function () {
  $(".menu-trigger").click(function () {
      $(".menu").hide();
    $(this).next(".menu").toggleClass("open"); // Selects only the next one!
    $(this).next(".menu").show();
    $(this).html($(this).next(".menu").hasClass("open") ? menu-trigger : menu-trigger);
  });
});

并在您的代码中：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="hu.bme.tmit.edoorbell">

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme"
    android:screenOrientation= "portrait">
    <activity android:name=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

    <service android:name=".MyFirebaseMessagingService">
        <intent-filter>
            <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
    </service>
    <service android:name=".FirebaseIDService">
        <intent-filter>
            <action android:name="com.google.firebase.INSTANCE_ID_EVENT" />
        </intent-filter>
    </service>

    <activity android:name=".AlertActivity"></activity>
</application>

单击并打开子菜单后，如何使按钮保持在原位

2 个答案: