Как подключить jQuery-скрипт к кнопке

@Рэм · Регистрация: 19.12.2015

Студворк — интернет-сервис помощи студентам

Я пишу сайт со страницей расчётов, на котором много кнопок. Я хочу привязать к каждой кнопке для сворачивания/разворачивания содержимое (текстовые поля, картинки, текст). Как это сделать,помогите пожалуйста, я запутался
Например я отдельно для расчета создал его подрасчеты, и теперь хочу их "спрятать" в кнопку "Расчет колонны заливочных труб", чтобы потом при нажатии расчет можно было легко свернуть и развернуть.
Я попытлся осуществить,то что описал выше с помощью скрипта jquery, но у меня не получилось, я не понял как правильно нужно сделать.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {

$("<button>Свернуть развернуть</button>").insertAfter("#buttonDiv button")
.click(function(e) {
$('h1').slideToggle("fast");
e.preventDefault();
});

});
</script>

@Рэм · 27.04.2016, 17:10 **[ТС]**

Пока я старался решить свою задачу сам, у меня почти всё получилось, но теперь скрипт скрывает и навигационные ссылки, потому что они включены в атрибут div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /><html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$("p").slideToggle("slow");
$("input").slideToggle("slow");
$("center").slideToggle("slow");
});
});
</script>
<head>
<link rel="stylesheet" type="text/css" href="pnstyle.css">
<title>Расчёты</title>

</head>
<body onload='slideToggle();'>
<center>
<div class="navMenu expander">
<form action="">
<a href="index.html"><b>Главная</a>
<a href="raschetu.html"> Расчёты</a>
<a href="reg.html">Войти</a>
<a href="spravka.php">Справка</a>
</form></div><br>

<table style="margin-top:-7px; */Отступ от верхнего края элемента/*
margin-left:-30px; */Отступ от левого края элемента/* ">
<tr><td width="250px" height="360px;">
<button>Глубина установки конца заливочных труб</button>

<button id="m2" class="knopka" onClick="f(2)">Глубина спуска колонны заливочных труб</button>

<button id="m3" class="knopka" onClick="f(3)">Общая длина заливочных труб</button>

<button id="m4" class="knopka" onClick="f(4)">Объем тампонажного раствора</button>

<button id="m5" class="knopka" onClick="f(5)">Объем закрепляемой зоны </button>

<button id="m6" class="knopka" onClick="f(6)">Количество сухого тампонажного цемента</button>

</td>

<table align="center">
<p>Глубина установки конца заливочных труб</p>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Расстояние от устья скважины до нижних отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Расстояние от устья скважины до верхних отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Интервал отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Плотность цементного раствора, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Плотность жидкости, находящейся в скважине, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td>
<input type='button' onClick='qw1()' value='Рассчитать' class="submit1" id='calc'>
</td></tr>
</table>

<table align="center">
<p>Глубина спуска колонны заливочных труб
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Страгивающая нагрузка на резьбовые соединения труб;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Коэффициент запаса;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Вес 1метра труб с учетом муфт;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Плотность цементного раствора, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Плотность жидкости, находящейся в скважине, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td>
<input type='button' onClick='qw1()' value='Рассчитать' class="submit1" id='calc'>
</td></tr>
</table>

<table align="center">
<p>
</table>

<link rel="import" href="/Kurs/index.html">

@Рэм · 27.04.2016, 17:48 **[ТС]**

Я решил вышестоящую проблему! Но! теперь у меня при нажатии на любую кнопку всё содержимое моего расчёта скрывается/открывается. А я хочу чтобы при нажатии на определённую мною кнопку скрывался/открывался нужный мне расчёт, где ошибка? Помогите пожалуйста, щас я серьёзно в тупике. Код изменил и он работае,поэтому хотелось бы чтобы почти мгновенно скрывалось/открывалось бы содержимое (часть скрипта взята с предыдущей курсовой, для своей ориентировки):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /><html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script> 
$(document).ready(function(){
$("button").click(function () {
$("p").slideToggle("slow");
$("input").slideToggle("slow");
$("div").slideToggle("slow");
});
});
</script>
<head>
<link rel="stylesheet" type="text/css" href="pnstyle.css">
<title>Расчёты</title>

</head>
<body onload='slideToggle();'>
<center>

<table align="center" style="margin-top:-55px;">
<tr><td height="50px;">
</td></tr>

<tr>
<td>
<a href="index.html"><b>Главная</a>
<a href="raschetu.html"> Расчёты</a>
<a href="reg.html">Войти</a>
<a href="spravka.php">Справка</a>
</td>
</tr>
</table>
<p>
</body>
</html>

<table style="margin-top:-7px; */Отступ от верхнего края элемента/*
margin-left:-30px; */Отступ от левого края элемента/* ">
<tr><td width="250px" height="360px;">
<button id="m1" class="knopka" onClick="f(1)">Расчёт колонны заливочных труб</button>

<button id="m2" class="knopka" onClick="f(2)">Расчет секций колонны труб</button>

<button id="m3" class="knopka" onClick="f(3)">Расчет количества потребного сухого тампонажного материала</button>

<button id="m4" class="knopka" onClick="f(4)">Расчет количества воды</button>

<button id="m5" class="knopka" onClick="f(5)">Расчет продолжительности процесса цементирования </button>

<button id="m6" class="knopka" onClick="f(6)">Расчет гидравлических сопротивлений</button>

</td>


<table align="center">
<p>Глубина установки конца заливочных труб</p>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Расстояние от устья скважины до нижних отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Расстояние от устья скважины до верхних отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Интервал отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Плотность цементного раствора, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Плотность жидкости, находящейся в скважине, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td>
<input type='button' onClick='qw1()' value='Рассчитать' class="submit1" id='calc'>
</td></tr>
</table>


<table align="center">
<p>Глубина спуска колонны заливочных труб
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Страгивающая нагрузка на резьбовые соединения труб;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Коэффициент запаса;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Вес 1метра труб с учетом муфт;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Плотность цементного раствора, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Плотность жидкости, находящейся в скважине, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td>
<input type='button' onClick='qw1()' value='Рассчитать' class="submit1" id='calc'>
</td></tr>
</table>

<table align="center">
<p>
</table>

<link rel="import" href="/Kurs/index.html">

@Kraken73 · 28.04.2016, 11:08

посмотри пример, разберешься. Гораздо проще, чем ты сделал

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="toggle_item">
    <h3 class="toggle_triger">CLick me</h3>
    <div class="toggle_content">
            скрытый текст
    </div>
</div>
<div class="toggle_item">
    <h3 class="toggle_triger">CLick me2</h3>
    <div class="toggle_content">
            скрытый текст2
    </div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
    $(document).ready(function(){
    $(".toggle_content").hide();
    $(".toggle_triger").click(function(){
        $(".toggle_content").slideUp("normal");
        if($(this).next(".toggle_content").is(':visible') )
        {
            $(this).next().slideUp("normal");
        }
        else {
            $(this).next().slideDown("normal");
        }
    });
 
});

@Рэм · 28.04.2016, 15:50 **[ТС]**

Спасибо, я вас понял и разобрался. Но после этого у меня возникла проблем что div-ов очень много, и поэтому я решил вложить свои 2подрасчёта в div, который я скрываю/раскрываю. Но после этого всё содержимое просто пропало, т.е. при нажатии на кнопку "расчёт колонны заливочных труб", ничего не отображается. Вот как я всё изменил, что не так с кодом?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /><html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ // Обработчиком для .ready()

$(".toggle_content").hide();
$(".toggle_triger").click(function(){ //"фишка" переключения
$(".toggle_content").slideUp("normal") ;
if($(this).next(".toggle_content").is(': visible') )
{
$(this).next().slideUp("normal");
}
else {
$(this).next().slideDown("normal");
}
});

});
</script>
<head>
<link rel="stylesheet" type="text/css" href="pnstyle.css">
<title>Расчёты</title>

</head>
<body onload='slideToggle();'>
<center>

<table align="center" style="margin-top:-55px;">
<tr><td height="50px;">
</td></tr>

<tr>
<td>
<a href="index.html"><b>Главная</a>
<a href="raschetu.html"> Расчёты</a>
<a href="reg.html">Войти</a>
<a href="spravka.php">Справка</a>
</td>
</tr>
</table>
<p>
</body>
</html>

<div class="toggle_item">

<h3 class="toggle_triger">Расчёт колонны заливочных труб</h3>
<div class="toggle_content"> 
<link rel="import" href="/Kurs/pr1.html">
<link rel="import" href="/Kurs/pr2.html">
</div>
</div>

И вложенные файлы подрасчётов pr1.html и pr2.html
pr1.html

<table align="center">
<div class="toggle_item">
<p class="toggle_triger">Глубина установки конца заливочных труб</p>
<div class="toggle_content"> 
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Расстояние от устья скважины до нижних отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Расстояние от устья скважины до верхних отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Интервал отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Плотность цементного раствора, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Плотность жидкости, находящейся в скважине, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td>
<input type='button' onClick='qw1()' value='Рассчитать' class="submit1" id='calc'>
</td></tr>
</table>

pr2.html

<table align="center">
<div class="toggle_item">
<p class="toggle_triger">Глубина спуска колонны заливочных труб
<div class="toggle_content"> 
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Страгивающая нагрузка на резьбовые соединения труб;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Коэффициент запаса;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Вес 1метра труб с учетом муфт;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Плотность цементного раствора, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td height="40px">
<div style="display:inline-block; width:400px;">Плотность жидкости, находящейся в скважине, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
</td>
</tr>
<tr><td>
<input type='button' onClick='qw1()' value='Рассчитать' class="submit1" id='calc'>
</td></tr>
</table>

@Kraken73 · 28.04.2016, 15:56

надеюсь разберешься и с этим

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="toggle_item">
        <p class="toggle_triger">Глубина установки конца заливочных труб</p>
        <div class="toggle_content"> <!-- скрывваем/раскрываем контент подрасчёта -->
        <table align="center">
        <tr>
            <td height="40px">
                <div style="display:inline-block; width:400px;">Расстояние от устья скважины до нижних отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
            </td>
        </tr>
        <tr>
            <td height="40px">
                <div style="display:inline-block; width:400px;">Расстояние от устья скважины до верхних отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
            </td>
        </tr>
        <tr>
            <td height="40px">
                <div style="display:inline-block; width:400px;">Интервал отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
            </td>
        </tr>
        <tr>
            <td height="40px">
                <div style="display:inline-block; width:400px;">Плотность цементного раствора, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
            </td>
        </tr>
        <tr>
            <td height="40px">
                <div style="display:inline-block; width:400px;">Плотность жидкости, находящейся в скважине, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">
            </td>
        </tr>
        <tr>
            <td>
                <input type='button' onClick='qw1()' value='Рассчитать' class="submit1" id='calc'>
            </td>
        </tr>
        </table>
        </div>
    </div>

@Рэм · 28.04.2016, 15:58 **[ТС]**

Так я как раз о нём и спрашиваю. После этого у меня возникла проблем что div-ов очень много, и поэтому я решил вложить свои 2подрасчёта (коды я сюда выслал, чуть выше) в div, который я скрываю/раскрываю. Но после этого всё содержимое просто пропало, т.е. при нажатии на кнопку "расчёт колонны заливочных труб", ничего не отображается. Вот как я всё изменил, что не так с кодом?

@Kraken73 · 28.04.2016, 16:03

но код у вас полное ..., внутри ячейки использовать inline-block чтобы сделать в строку? Не проще еще 1 ячейку создать?

HTML5
1
2
3
4
5
6
7
8
<tr>
            <td height="40px">
                Расстояние от устья скважины до нижних отверстий фильтра, м;
            </td>
            <td>
                <input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)">   
            </td>
        </tr>

Добавлено через 1 минуту
а с чего должно происходить что-то? если у вас функции нету qw1()

Добавлено через 2 минуты
+ id - Уникальный идентификатор, а вы используете его на все input. для этого есть классы

@Рэм · 28.04.2016, 16:10 **[ТС]**

Я ведь, говорил ранее, что код брал с прошлого года курсовой,чтобы самому по ним разобраться. Ответили лучше бы в тему решения проблемы

@Kraken73 · 28.04.2016, 16:11

Сообщение от Рэм

Ответили лучше бы в тему решения проблемы

эмм, я написал в чем проблема

Сообщение от ******73

а с чего должно происходить что-то? если у вас функции нету qw1()
+ id - Уникальный идентификатор, а вы используете его на все input. для этого есть классы

@Рэм · 28.04.2016, 16:22 **[ТС]**

Я пока не считаю, а "комплектую", все id, class, стёр, onclick оставил пустым
Но проблема всё равно пока не решилась, также пусто
А в onclick-ах я пока ни чего не пишу, потому что по ним будут считаться расчёты по формулам

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@Рэм 3 / 3 / 0 Регистрация: 19.12.2015 Сообщений: 179

	Как подключить jQuery-скрипт к кнопке 27.04.2016, 16:09. Показов 2848. Ответов 10 Метки нет (Все метки) Я пишу сайт со страницей расчётов, на котором много кнопок. Я хочу привязать к каждой кнопке для сворачивания/разворачивания содержимое (текстовые поля, картинки, текст). Как это сделать,помогите пожалуйста, я запутался Например я отдельно для расчета создал его подрасчеты, и теперь хочу их "спрятать" в кнопку "Расчет колонны заливочных труб", чтобы потом при нажатии расчет можно было легко свернуть и развернуть. Я попытлся осуществить,то что описал выше с помощью скрипта jquery, но у меня не получилось, я не понял как правильно нужно сделать. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function() { $("<button>Свернуть развернуть</button>").insertAfter("#buttonDiv button") .click(function(e) { $('h1').slideToggle("fast"); e.preventDefault(); }); }); </script> Миниатюры 0

@Рэм 3 / 3 / 0 Регистрация: 19.12.2015 Сообщений: 179
	27.04.2016, 17:10 [ТС]
	Пока я старался решить свою задачу сам, у меня почти всё получилось, но теперь скрипт скрывает и навигационные ссылки, потому что они включены в атрибут div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /><html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function () { $("p").slideToggle("slow"); $("input").slideToggle("slow"); $("center").slideToggle("slow"); }); }); </script> <head> <link rel="stylesheet" type="text/css" href="pnstyle.css"> <title>Расчёты</title> </head> <body onload='slideToggle();'> <center> <div class="navMenu expander"> <form action=""> <a href="index.html"><b>Главная</a> <a href="raschetu.html"> Расчёты</a> <a href="reg.html">Войти</a> <a href="spravka.php">Справка</a> </form></div><br> <table style="margin-top:-7px; /Отступ от верхнего края элемента/ margin-left:-30px; /Отступ от левого края элемента/ "> <tr><td width="250px" height="360px;"> <button>Глубина установки конца заливочных труб</button> <button id="m2" class="knopka" onClick="f(2)">Глубина спуска колонны заливочных труб</button> <button id="m3" class="knopka" onClick="f(3)">Общая длина заливочных труб</button> <button id="m4" class="knopka" onClick="f(4)">Объем тампонажного раствора</button> <button id="m5" class="knopka" onClick="f(5)">Объем закрепляемой зоны </button> <button id="m6" class="knopka" onClick="f(6)">Количество сухого тампонажного цемента</button> </td> <table align="center"> <p>Глубина установки конца заливочных труб</p> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Расстояние от устья скважины до нижних отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Расстояние от устья скважины до верхних отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Интервал отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Плотность цементного раствора, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Плотность жидкости, находящейся в скважине, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td> <input type='button' onClick='qw1()' value='Рассчитать' class="submit1" id='calc'> </td></tr> </table> <table align="center"> <p>Глубина спуска колонны заливочных труб <tr><td height="40px"> <div style="display:inline-block; width:400px;">Страгивающая нагрузка на резьбовые соединения труб;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Коэффициент запаса;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Вес 1метра труб с учетом муфт;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Плотность цементного раствора, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Плотность жидкости, находящейся в скважине, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td> <input type='button' onClick='qw1()' value='Рассчитать' class="submit1" id='calc'> </td></tr> </table> <table align="center"> <p> </table> <link rel="import" href="/Kurs/index.html"> Миниатюры 0

@Рэм 3 / 3 / 0 Регистрация: 19.12.2015 Сообщений: 179
	27.04.2016, 17:48 [ТС]
	Я решил вышестоящую проблему! Но! теперь у меня при нажатии на любую кнопку всё содержимое моего расчёта скрывается/открывается. А я хочу чтобы при нажатии на определённую мною кнопку скрывался/открывался нужный мне расчёт, где ошибка? Помогите пожалуйста, щас я серьёзно в тупике. Код изменил и он работае,поэтому хотелось бы чтобы почти мгновенно скрывалось/открывалось бы содержимое (часть скрипта взята с предыдущей курсовой, для своей ориентировки): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /><html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <!-- подключаем библиотеку jquery--> <script> <!-- Прячем/Показываем расчет--> $(document).ready(function(){ $("button").click(function () { $("p").slideToggle("slow"); $("input").slideToggle("slow"); $("div").slideToggle("slow"); }); }); </script> <head> <link rel="stylesheet" type="text/css" href="pnstyle.css"> <title>Расчёты</title> </head> <body onload='slideToggle();'> <center> <table align="center" style="margin-top:-55px;"> <tr><td height="50px;"> </td></tr> <tr> <td> <a href="index.html"><b>Главная</a> <a href="raschetu.html"> Расчёты</a> <a href="reg.html">Войти</a> <a href="spravka.php">Справка</a> </td> </tr> </table> <p> </body> </html> <table style="margin-top:-7px; /Отступ от верхнего края элемента/ margin-left:-30px; /Отступ от левого края элемента/ "> <tr><td width="250px" height="360px;"> <button id="m1" class="knopka" onClick="f(1)">Расчёт колонны заливочных труб</button> <button id="m2" class="knopka" onClick="f(2)">Расчет секций колонны труб</button> <button id="m3" class="knopka" onClick="f(3)">Расчет количества потребного сухого тампонажного материала</button> <button id="m4" class="knopka" onClick="f(4)">Расчет количества воды</button> <button id="m5" class="knopka" onClick="f(5)">Расчет продолжительности процесса цементирования </button> <button id="m6" class="knopka" onClick="f(6)">Расчет гидравлических сопротивлений</button> </td> <!--"подрасчёт 1"--> <table align="center"> <p>Глубина установки конца заливочных труб</p> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Расстояние от устья скважины до нижних отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Расстояние от устья скважины до верхних отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Интервал отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Плотность цементного раствора, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Плотность жидкости, находящейся в скважине, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td> <input type='button' onClick='qw1()' value='Рассчитать' class="submit1" id='calc'> </td></tr> </table> <!--"подрасчёт 2"--> <table align="center"> <p>Глубина спуска колонны заливочных труб <tr><td height="40px"> <div style="display:inline-block; width:400px;">Страгивающая нагрузка на резьбовые соединения труб;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Коэффициент запаса;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Вес 1метра труб с учетом муфт;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Плотность цементного раствора, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Плотность жидкости, находящейся в скважине, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td> <input type='button' onClick='qw1()' value='Рассчитать' class="submit1" id='calc'> </td></tr> </table> <table align="center"> <p> </table> <link rel="import" href="/Kurs/index.html"> 0

@Рэм 3 / 3 / 0 Регистрация: 19.12.2015 Сообщений: 179
	28.04.2016, 15:50 [ТС]
	Спасибо, я вас понял и разобрался. Но после этого у меня возникла проблем что div-ов очень много, и поэтому я решил вложить свои 2подрасчёта в div, который я скрываю/раскрываю. Но после этого всё содержимое просто пропало, т.е. при нажатии на кнопку "расчёт колонны заливочных труб", ничего не отображается. Вот как я всё изменил, что не так с кодом? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /><html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <!-- подключаем библиотеку jquery--> <script> <!-- Прячем/Показываем расчет--> $(document).ready(function(){ // Обработчиком для .ready() $(".toggle_content").hide(); $(".toggle_triger").click(function(){ //"фишка" переключения $(".toggle_content").slideUp("normal") ; if($(this).next(".toggle_content").is(': visible') ) { $(this).next().slideUp("normal"); } else { $(this).next().slideDown("normal"); } }); }); </script> <head> <link rel="stylesheet" type="text/css" href="pnstyle.css"> <title>Расчёты</title> </head> <body onload='slideToggle();'> <center> <table align="center" style="margin-top:-55px;"> <tr><td height="50px;"> </td></tr> <tr> <td> <a href="index.html"><b>Главная</a> <a href="raschetu.html"> Расчёты</a> <a href="reg.html">Войти</a> <a href="spravka.php">Справка</a> </td> </tr> </table> <p> </body> </html> <div class="toggle_item"> <!--"расчёт 1"--> <h3 class="toggle_triger">Расчёт колонны заливочных труб</h3> <div class="toggle_content"> <!-- скрывваем/раскрываем контент расчёта --> <link rel="import" href="/Kurs/pr1.html"> <link rel="import" href="/Kurs/pr2.html"> </div> </div> И вложенные файлы подрасчётов pr1.html и pr2.html pr1.html <!--"подрасчёт 1.1"--> <table align="center"> <div class="toggle_item"> <p class="toggle_triger">Глубина установки конца заливочных труб</p> <div class="toggle_content"> <!-- скрывваем/раскрываем контент подрасчёта --> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Расстояние от устья скважины до нижних отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Расстояние от устья скважины до верхних отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Интервал отверстий фильтра, м;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Плотность цементного раствора, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Плотность жидкости, находящейся в скважине, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td> <input type='button' onClick='qw1()' value='Рассчитать' class="submit1" id='calc'> </td></tr> </table> pr2.html <!--"подрасчёт 1.2"--> <table align="center"> <div class="toggle_item"> <p class="toggle_triger">Глубина спуска колонны заливочных труб <div class="toggle_content"> <!-- скрывваем/раскрываем контент подрасчёта --> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Страгивающая нагрузка на резьбовые соединения труб;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Коэффициент запаса;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Вес 1метра труб с учетом муфт;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Плотность цементного раствора, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td height="40px"> <div style="display:inline-block; width:400px;">Плотность жидкости, находящейся в скважине, кг/м<sup>3</sup>;</div><input type="text" align="right" id="weight_clay1" maxlength="8" class="textbox" onkeyup="return proverka(this)"> </td> </tr> <tr><td> <input type='button' onClick='qw1()' value='Рассчитать' class="submit1" id='calc'> </td></tr> </table> Миниатюры 0

@Рэм 3 / 3 / 0 Регистрация: 19.12.2015 Сообщений: 179
	28.04.2016, 15:58 [ТС]
	Так я как раз о нём и спрашиваю. После этого у меня возникла проблем что div-ов очень много, и поэтому я решил вложить свои 2подрасчёта (коды я сюда выслал, чуть выше) в div, который я скрываю/раскрываю. Но после этого всё содержимое просто пропало, т.е. при нажатии на кнопку "расчёт колонны заливочных труб", ничего не отображается. Вот как я всё изменил, что не так с кодом? 0

@Рэм 3 / 3 / 0 Регистрация: 19.12.2015 Сообщений: 179
	28.04.2016, 16:10 [ТС]
	Я ведь, говорил ранее, что код брал с прошлого года курсовой,чтобы самому по ним разобраться. Ответили лучше бы в тему решения проблемы 0

@Рэм 3 / 3 / 0 Регистрация: 19.12.2015 Сообщений: 179
	28.04.2016, 16:22 [ТС]
	Я пока не считаю, а "комплектую", все id, class, стёр, onclick оставил пустым Но проблема всё равно пока не решилась, также пусто А в onclick-ах я пока ни чего не пишу, потому что по ним будут считаться расчёты по формулам 0